Callout
One message inside a page.
<mm-callout tone="warning" heading="Credentials for snowflake-prod expire on 2 November.">
Rotate them in Plugins before then.
<mm-button slot="actions" size="sm">Open Plugins</mm-button>
</mm-callout>
<mm-callout tone="info" compact dismissible heading="Results truncated.">Showing the first 1,000 of 1,284,019 rows.</mm-callout>
Guidance
Callouts surface one message inside a page: a stale source, a truncated result, a failed run.
A soft status fill, a 16px status icon, a bold heading in ink written as a full sentence, and a
body in mm-text-2 that says what to do. No coloured stripe and no border.
compact is the inline alert: one line, smaller padding, for forms and table toolbars.
Callouts are role="status", so changes are announced politely. Set urgent only when the
message must interrupt (a query that was just denied), which makes it role="alert". With
dismissible, the close button fires mm-dismiss and hides the callout unless the event is
cancelled. Escape inside the callout also dismisses it.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
tone | tone | CalloutTone | 'info' | info (default), success, warning or danger. |
heading | heading | string | '' | The heading, written as a full sentence. |
compact | compact | boolean | false | The single-line inline alert. |
dismissible | dismissible | boolean | false | Shows a close button that fires mm-dismiss. |
urgent | urgent | boolean | false | Interrupts assistive technology with role="alert". Use sparingly. |
icon | icon | string | '' | Overrides the tone's icon. |
Methods
| Method | Description |
|---|---|
dismiss() | Dismisses the callout as if the close button were pressed. |
Events
| Event | Detail | Description |
|---|---|---|
mm-dismiss | CustomEvent<{ tone: string }> | The close button was activated. Cancel it to keep the callout visible. |
Slots
| Slot | Description |
|---|---|
| Default | The body: what happened and what to do. |
heading | The heading, if you need markup. Otherwise use the heading attribute. |
actions | Buttons, e.g. <mm-button size="sm">Open pipeline</mm-button>. |
CSS parts
| Part | Description |
|---|---|
callout | The container. |
icon | The status icon. |
heading | The heading. |
body | The body. |
actions | The actions row. |
dismiss | The close button. |
Examples
Every state of mm-callout in Storybook, with keyboard and screen reader tests.