Button

A clickable element that performs an action.

Allowed Tags

You can add the button class to any element to style it as a Button, but you should typically only use it on a button (most cases) or a (if the Button's a link). Using it on a span or other non-interactive element is discouraged as it can introduce accessibility concerns.

I'm a link that looks like a button I'm a span that looks like a button

<button class="button">I'm a button</button>
<a href="#" class="button"
  >I'm a link that looks like a button</a
>
<span class="button"
  >I'm a span that looks like a button</span
>

Variants

Buttons can have different styles, called variants. To set the variant of a Button, add one of the following classes:

primary
secondary (default)
subtle

<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button subtle">Subtle</button>

Sizes

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

small
medium (default)
large

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

<button class="button small">Small</button>
<button class="button medium">Medium</button>
<button class="button large">Large</button>
<button class="button" style="font-size: 1.5rem">
  Custom size (1.5rem)
</button>

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.

<button disabled class="button">Disabled attribute</button>
<button class="disabled button">Disabled class</button>
<button aria-disabled="true" class="button">
  aria-disabled
</button>

Loading

To show that the action triggered by a Button is currently pending, add the loading class to that Button. This gives the user visual feedback that the action is in progress.

Most of the time, you'll want to disable the Button while it's loading so the user can't kick of the action multiple times. In this case, also follow the instructions above for disabling the Button.

<button disabled class="loading button">
  Disabled and loading
</button>
<button class="loading button">Just loading</button>

Link

You can add the button class to an a element to create a link styled as a Button.

Link Buttons that open in a new tab will have an external icon added to the end. To create a Link Button that opens in a new tab but doesn't have an icon, add the class no-external-icon.

Go to Homepage Go to Homepage

<a href="/" class="button">Go to Homepage</a>
<a href="/" target="_blank" class="button"
  >Go to Homepage</a
>

Icon Button

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

Make sure to add an accessible label to your Icon Button using the aria-label attribute.

<button class="icon button">
  <svg
    width="1.5em"
    height="1.5em"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    color="currentcolor"
  >
    <path
      d="M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z"
      stroke="currentcolor"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
  </svg>
</button>
<button class="red primary icon button">
  <svg
    width="1.5em"
    height="1.5em"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    color="currentcolor"
  >
    <path
      d="M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z"
      stroke="currentcolor"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
  </svg>
</button>
<button class="subtle icon button">
  <svg
    width="1.5em"
    height="1.5em"
    stroke-width="1.5"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    color="currentcolor"
  >
    <path
      d="M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z"
      stroke="currentcolor"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
  </svg>
</button>

Colors

The primary and subtle variants support multiple color schemes. To set the color of a primary or subtle Button, add one of the following classes:

brand (default)
red
orange
yellow
green
sky
blue
purple
magenta
gray
black
white

Be careful using black or white subtle Buttons, since white text is invisible on a white background (common in light mode), and black text is invisible on a black background (common in dark mode). You can see this in the example below.

<button class="button primary">Brand</button>
<button class="button primary red">Red</button>
<button class="button primary orange">Orange</button>
<button class="button primary yellow">Yellow</button>
<button class="button primary green">Green</button>
<button class="button primary sky">Sky</button>
<button class="button primary blue">Blue</button>
<button class="button primary purple">Purple</button>
<button class="button primary magenta">Magenta</button>
<button class="button primary gray">Gray</button>
<button class="button primary black">Black</button>
<button class="button primary white">White</button>
<button class="button subtle">Brand</button>
<button class="button subtle red">Red</button>
<button class="button subtle orange">Orange</button>
<button class="button subtle yellow">Yellow</button>
<button class="button subtle green">Green</button>
<button class="button subtle sky">Sky</button>
<button class="button subtle blue">Blue</button>
<button class="button subtle purple">Purple</button>
<button class="button subtle magenta">Magenta</button>
<button class="button subtle gray">Gray</button>
<button class="button subtle black">Black</button>
<button class="button subtle white">White</button>