Input

Standard input

Standard input, with icon

Detailed mode (keeps placeholder visible)

Fancy placeholder

Bold mode

Highlighted

As a simple select box

Button

Primary

Secondary

Disabled

Loading

IconButton

Basic

With a badge

Spinner

Example

TagSet

Basic

Selected
Removable
Interactive
With badge +1
Quam
Ornare
Dolor
Ullamcorper
Consectetur

ButtonTabs

Has typescript support for values

Basic

TextTabs

Same as ButtonTabs, but with different styling

Basic

ControlGroup

Helps with some basic alignment/spacing

Horizontal

Dense mode

Stacked

Align Left

Align Right

Stretched

InvertedBackground

Blue background + white content

Example

Oh hi there

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.

DonationSelector

Renders the donation selector, and handles adding to cart

Main

Reversed

Copyright 2022 Frameline. All rights reservedSite by ED.

Stay updated

We're excited to keep you in the loop on all things Frameline (with no spam - ever!)