<button class='button ~positive !low'>Button</button>
<button class='button ~positive !normal'>Button</button>
<button class='button ~positive !high'>Button</button>
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.
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.
Forms — When using a button inside forms, it can sometimes be helpful to make the button look more like a field input. If this is what you want, you can apply the field selector (e.g., <button class="button field">
) on top of the button.
Variants
Buttons have full tone and priority support.
Low Priority
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>
Normal Priority
Example code
<span class="button ~neutral !normal mb-1">Button</span>
<span class="button ~positive !normal mb-1">Button</span>
<span class="button ~warning !normal mb-1">Button</span>
<span class="button ~critical !normal mb-1">Button</span>
<span class="button ~info !normal mb-1">Button</span>
<span class="button ~urge !normal mb-1">Button</span>
High Priority
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>
Button Field (normal priority)
Example code
<span class="button field ~neutral mb-1 w-auto">Button</span>
<span class="button field ~positive mb-1 w-auto">Button</span>
<span class="button field ~warning mb-1 w-auto">Button</span>
<span class="button field ~critical mb-1 w-auto">Button</span>
<span class="button field ~info mb-1 w-auto">Button</span>
<span class="button field ~urge mb-1 w-auto">Button</span>
Block Button
To make a block button, simply set the width
to 100%
and the flex behavior to justify-center
:
Your form here...
Example code
<div class="card ~neutral !low w-48 content">
<p>Your form here...</p>
<span class="button ~urge w-full justify-center">Click!</span>
</div>
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
I'm trying my best.
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.
Example code
<div class="card ~neutral !low p-0">
<div class="p-4 content">
<h3>I'm trying my best.</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 ~urge">
<span class="button ~urge !high">Save</span> <span class="button ~urge !low">Continue Editing</span>
</div>
</div>
Customization
Name | Type | Default | Description |
---|---|---|---|
--color-fill |
color | — | sets background color |
--color-content |
color | — | sets text color |
--button-line-height |
proportion |
1.5
|
sets line height |
--button-transition-speed |
time |
75ms
|
sets select animation speed |
--button-filter-brightness |
percent |
95%
|
sets the brightness filter on hover + focus |
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g., --color-content
) and global
variables (e.g., --family-primary
) are defined here.