Overview

The button is a core interface element — it’s the primary way to indicate interactivity, so it comes in many shapes and sizes. Buttons in a17t are inline flex, so you can fit as much into them as you’d like (and they’ll automatically look nice).

The example buttons on this page are <span> elements, but the .button selector can be applied to essentially any type of element. If a button’s element is interactive (e.g., an <a> with a valid href attribute), the :focus state will by default be identical to the :hover state.

There are low and high priority variants, as well as a large variant (ideal for marketing pages) and a loading variant (great for indicating work happening behind the scenes).

Considerations

Navigation — Avoid using buttons for navigation. Buttons should generally only be used to perform actions. While that may sometimes mean navigating to a new page (as is the case with a sign-up button), it usually doesn’t. In cases of regular navigation, consider using a portal instead.

Variants

Buttons have full tone and priority support.

Low Priority

Button Button Button Button Button Button

Example code

<span class="button ~neutral @low mb-1">Button</span>

<span class="button ~positive @low mb-1">Button</span>

<span class="button ~warning @low mb-1">Button</span>

<span class="button ~critical @low mb-1">Button</span>

<span class="button ~info @low mb-1">Button</span>

<span class="button ~urge @low mb-1">Button</span>

High Priority

Button Button Button Button Button Button

Example code

<span class="button ~neutral @high mb-1">Button</span>

<span class="button ~positive @high mb-1">Button</span>

<span class="button ~warning @high mb-1">Button</span>

<span class="button ~critical @high mb-1">Button</span>

<span class="button ~info @high mb-1">Button</span>

<span class="button ~urge @high mb-1">Button</span>

Loading Button

To make a button “loading,” simply apply the .loading selector.

Save Save Save

Example code

<span class="button ~info @low loading mb-1">Save</span>
<span class="button ~urge @high loading mb-1">Save</span>
<span class="button ~critical @high loading mb-1">Save</span>

Large Buttons

To make a button large — as we do on a17t’s landing page — simply apply the button-xl class.

Get started View the source

Example code

<a href="/guide/" class="button ~urge @high button-xl">Get started</a>
<a href="https://github.com/milesmcc/a17t" class="button ~neutral @low button-xl">
  View the source
</a>

Accessibility

Be mindful of all possible states. Not everyone interacts with a button by moving the mouse to click on it. Some use the tab key to select a button visually, and others use non-graphical interfaces entirely. When customizing buttons, remember that the :hover state does not apply to all cases in which a button is selected.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

What's going on?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget leo nulla. Nam vitae pellentesque risus. Duis faucibus erat sit amet arcu efficitur lobortis. Donec ac convallis diam, non suscipit mauris.

Save Continue Editing

Example code

<div class="card ~neutral @low p-0 border-0">
  <div class="p-4 content">
    <h3>What's going on?</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget leo nulla. Nam vitae pellentesque risus. Duis faucibus erat sit amet arcu efficitur lobortis. Donec ac convallis diam, non suscipit mauris.</p>
  </div>
  <div class="p-4 section ~neutral">
    <span class="button ~neutral @high">Save</span> <span class="button ~neutral @low">Continue Editing</span>
  </div>
</div>