Button

A standard button

Although any tag can be used for a button, it will only be keyboard focusable if you use a <button> tag or you add the property tabindex="0". Keyboard accessible buttons will preserve focus styles after click, which may be visually jarring.

Focusable

A button can be formatted to show different levels of emphasis

Setting your brand colors to primary and secondary color variables in site.variables will allow you to use your color theming for UI elements

A button can animate to show hidden content

The button will be automatically sized according to the visible content size. Make sure there is enough room for the hidden content to show

Sign-up for a Pro account

A button can appear alongside a label

2,048

1,048

Forks

1,048

A button can have only an icon

A button can use an icon as a label

A basic button is less pronounced

An none bordered less important button

A button can be formatted to appear on dark backgrounds

Buttons can exist together as a group

Button groups can show groups of icons

Button groups can contain conditionals

Or buttons can have their text localized, or adjusted by using the data-text attribute. If the size of the conditional changes you will need to adjust @orCircleSize

A button can show it is currently the active user selection

A button can show it is currently unable to be interacted with

A button can show a loading indicator

A button can be formatted to link to a social website

A button can have different sizes

A button can be aligned to the left or right of its container

A button can have different colors

A button can reduce its padding to fit into tighter spaces

A button can be formatted to toggle on and off

A button can hint towards a positive consequence

A button can hint towards a negative consequence

A button can take the width of its container

A button can be circular

A button can be attached to the top or bottom of other content

Top

Bottom

One

Two

One

Two

A button can be attached to the left or right of other content

Groups can be formatted to appear vertically

Horizontal groups can automatically be stacked on mobile devices

Groups can be formatted as icons

Groups can be formatted as labeled icons

Groups can be formatted to use multiple button types together

Groups can have their widths divided evenly

Groups can have a shared color

A button group can be less pronounced

One

Two

Three

Groups can have a shared size

Groups buttons can automatically wrap sharing the overall available width

There exists an optional wrapped helper class which should be set to the button group when it's known if a button group is actually wrapped, which will adjust some border-radius. As it is not possible to detect a wrapping child automatically via pure CSS, you should use that helper class whenever appropriate.

Buttons inside groups can automatically get a margin so they dont appear attached together, especially when used together with wrapping on responsive layouts

You can use compact wrapping if you need wrapping buttons which should not share the same width on each wrapped row. Especially for spaced buttons.

Types

Emphasis

Animated

Labeled

Icon

Labeled Icon

Basic

Tertiary

Inverted

Groups

Buttons

Icon Buttons

Content

Conditionals

States

Active

Disabled

Loading

Variations

Social

Size

Floated

Colored

Compact

Toggle

Positive

Negative

Fluid

Circular

Vertically Attached

Horizontally Attached

Group Variations

Vertical Buttons

Stackable Buttons

Icon Buttons

Labeled Icon Buttons

Mixed Group

Equal Width

Colored Buttons

Basic Buttons

Group Sizes

Wrapping Buttons

Spaced Buttons

Dimmer Message Dimmer sub-header

Dimmer Message
Dimmer sub-header