Button

For triggering actions

Demo

Ordinal name

Disabled state

Link as button

Link

Remove type

Button group

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 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
  • true
  • false
  • mixed
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:

Alert uses remove button
Tag supports remove button
Dialog defines a slot for its remove button.

Your app can use the remove button:

Order summary

🌮 Taco w/ spicy pork
🌯 Burrito w/ steak, add guac
🥤 Horchata, large, x2

Total $18.36

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.