Button
For triggering actions
Demo
API
Tag
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
button |
Native element | Any content, but none for remove button |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
ord required* |
|
Ordinal number word for describing the button's precedence.
*The remove button does not require this. |
|||||||
type |
|
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. |
|||||||
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 type
Like other buttons, it is your app not Mdash that handles the click. Dialog, alert, and other components use remove button to create a consistent experience. You should use it for similar use cases to meet user expectations:
Your order
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.