For triggering actions
||Native element||Any content, but none for remove button|
Ordinal number word for describing the button's precedence.
*The remove button does not require this.
Use submit when the button submits a form. Avoid
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.
||Boolean attribute||Disables the button. Link buttons also need
For a only:
||button||Styles the link as a button. Use this instead of
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:
Changing the size of the icon can be done with a utility class:
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.