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

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.

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 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:

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.