Button
Triggers one action.
<mm-button variant="primary" icon="play-arrow">Run query</mm-button>
<mm-button variant="danger" icon="delete">Delete asset</mm-button>
<mm-button variant="ghost" icon="content-copy" label="Copy MRN"></mm-button>
Guidance
Buttons trigger one action, labelled with a verb plus an object ("Run query", "Add plugin", "Delete asset"). One primary per view region. Danger buttons always carry an icon and a word naming what is destroyed. Hover changes colour only: buttons never lift or scale, and labels never end in "→".
Icon-only buttons need label, which is announced and shown as a tooltip.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'secondary' | primary, secondary (default), ghost or danger. |
size | size | 'md' | 'sm' | 'md' | md (36px, default) or sm (30px). |
icon | icon | string | '' | Leading Material Symbols icon name. Required for danger. |
label | label | string | '' | Accessible name for icon-only buttons; also shown as an instant tooltip. Setting it with no slotted text makes the button icon-only. |
disabled | disabled | boolean | false | |
loading | loading | boolean | false | Shows a spinner, keeps the label, and blocks activation. |
type | type | 'button' | 'submit' | 'reset' | 'button' | button (default), submit or reset. Submit and reset work with the closest form. |
href | href | string | '' | Renders a link styled as a button. |
target | target | string | '' | |
external | external | boolean | false | With href: opens in a new tab, with a trailing arrow and "(opens in a new tab)" for screen readers. For places outside Marmot. |
name | name | string | '' | |
value | value | string | '' | |
pressed | pressed | 'true' | 'false' | undefined | Reflects aria-pressed for toggle buttons. | |
expanded | expanded | 'true' | 'false' | undefined | Reflects aria-expanded for buttons that control a menu or disclosure. | |
controls | controls | string | '' | |
haspopup | haspopup | 'menu' | 'listbox' | 'dialog' | undefined | ||
form |
Slots
| Slot | Description |
|---|---|
| Default | The label. |
icon | A leading icon, if you need more than the icon attribute. |
CSS parts
| Part | Description |
|---|---|
button | The native button or link. |
icon | The leading icon. |
label | The label wrapper. |
spinner | The loading indicator. |
Examples
Every state of mm-button in Storybook, with keyboard and screen reader tests.