Button
For triggering actions
Demo
Ordinal name
Disabled state
Link as button
LinkRemove type
Button group
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 dialog and is intended for remove/close use cases (e.g. remove item from cart, close the 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. |
|||||||
aria-pressed |
|
Defines the button (secondary only) as a toggle
button and sets its pressed state. The ariaPressed property works as well. See MDN
for details.
See Button Group below to learn how to create a group of toggle buttons. It is recommended to use secondary buttons. |
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.
Custom remove
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 app can use the remove button:
Order summary
Changing the size of the icon can be done with a utility class:
Button Group
To create a button group, simply put toggle buttons in a container with role="group"
. Your app manages the aria-pressed
state and determines if one or more can be pressed at a time.
Event delegation is useful for capturing all toggle button clicks and managing the pressed state. Also, optionally using the value
or data-*
attribute can help your app know what actions to take, e.g. setting a new filter and removing the others.
Custom button styles
Mdash leaves the plain button element untouched so you can freely use them without competing with Mdash styles (Mdash buttons require the ord
attribute). Optionally add the all-unset
utility class to remove user-agent styles from button, then customize as desired. For example:
Accessibility
The remove button should have an aria-label
attribute and disabled link buttons should have tabindex="-1"
to prevent activation.