Menu

Button
A button indicates a possible user action

Types

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

Emphasis

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

Animated

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
Next
Sign-up for a Pro account

Labeled

A button can appear alongside a label

Like
2,048
2,048
Like
Like
1,048
Forks
1,048

Icon

A button can have only an icon

Labeled Icon

A button can use an icon as a label

Basic

A basic button is less pronounced

Tertiary

An none bordered less important button

Inverted

A button can be formatted to appear on dark backgrounds

Groups

Buttons

Buttons can exist together as a group

Icon Buttons

Button groups can show groups of icons

Content

Conditionals

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

States

Active

A button can show it is currently the active user selection

Disabled

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

Loading

A button can show a loading indicator





Variations

Social

A button can be formatted to link to a social website

Size

A button can have different sizes

Floated

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

Colored

A button can have different colors

Compact

A button can reduce its padding to fit into tighter spaces

Toggle

A button can be formatted to toggle on and off

Positive

A button can hint towards a positive consequence

Negative

A button can hint towards a negative consequence

Fluid

A button can take the width of its container

Circular

A button can be circular

Vertically Attached

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

Top
Bottom
One
Two
One
Two

Horizontally Attached

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

Group Variations

Vertical Buttons

Groups can be formatted to appear vertically

Stackable Buttons

Horizontal groups can automatically be stacked on mobile devices

Icon Buttons

Groups can be formatted as icons

Labeled Icon Buttons

Groups can be formatted as labeled icons

Mixed Group

Groups can be formatted to use multiple button types together

Equal Width

Groups can have their widths divided evenly

Colored Buttons

Groups can have a shared color

Basic Buttons

A button group can be less pronounced

One
Two
Three

Group Sizes

Groups can have a shared size

Wrapping Buttons

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.

Spaced Buttons

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.

Dimmer Message
Dimmer sub-header