Button

For triggering actions

Demo

Link

API

Tag

Name Type Content
button Native element Any content, but none for remove button

Attributes

Name Value Description
ord required*
  • primary
  • secondary
  • tertiary
Ordinal number word for describing the button's precedence.

*The remove button does not require this.

type
  • submit
  • remove

Use submit when the button submits a form. Avoid <input type="submit">. See Submit button for more info

Remove is a custom button type. It's used by other components like Alert and is intended for remove/close use cases (e.g. remove item from cart, close Dialog). See below for more info.

disabled Boolean attribute Disables the button. Link buttons also need tabindex="-1" to prevent activation by keyboard or assistive tech.

For a only:

role required button Styles the link as a button. Use this instead of <button> when your use case needs a real link.

Guidelines

Button or link?

If the action navigates to a new url, strive to use regular links, but if the link needs to look like a button then add the role="button" attribute. It's important that for these cases an actual link is used so the user can cmd + click or copy the link. If the action does not navigate the user to a new url, then use a regular button.

The remove button

Dialog, Alert, and other components use this button type to create a consistent experience. Use it for similar use cases to match user expectations:

Lorem ipsum dolor
lorem ipsum dolor
Lorem ipsum dolor

Your order

🌮 Taco, spicy pork
🌯 Burrito, steak, add guac
🥤 Horchata, 2 qty.

Total $18.36

Changing the size of the icon can be done with a utility class:

Accessibility

The remove button should have an aria-label attribute and disabled buttons should have aria-disabled="true" and disabled link buttons should also have tabindex="-1" to prevent activation by keyboard or assistive tech.