Button

Example Code

<!-- Buttons are styled automatically -->
<button class="button">I'm a button</button>

<!-- Other elements are styled as buttons with class "button" -->
<a href="#" class="button">I'm a button too</a>

Result

I'm a button too

Options

Variant

To set the variant of a button, add one of the following classes:

primary
secondary
subtle

If you don't add any of these, buttons default to the secondary variant.

Size

To adjust the size of a button, add one of the following classes:

small
medium
large

If you don't add any of these, buttons default to medium.

For finer-grained control over sizing, you can set the font-size style to an arbitrary value and the button will scale accordingly.

Disabled

To give a button a disabled style, do one of the following:

Add the disabled attribute
Add the disabled class
Set the aria-disabled attribute to true

If you use a method other than setting the disabled attribute, make sure you are disabling the behavior of the button as well. Otherwise, the button will look disabled but still function normally.

Loading

To give a button a busy/loading style, add the class loading. Many times, you will also want to disable the button, but this is not required.

Link

You can add the button class to an a element to style the link as a button. Links that open in a new tab will automatically have an icon added to the button.

Go to Homepage Go to Homepage

Icon Button

You can add the icon class to a button to make it circular and adjust the padding, to make it more suited to holding an icon. This class can be combined with a variant, size, or other modifiers described here.

Colors

Buttons with the Primary variant may also have an alternate color. While they default to the brand color, you can override this by adding one of the following classes:

red
orange
yellow
green
sky
blue
purple
magenta
gray