Feedback

Alert

Severity semantics, inline layout, optional actions, and explicit dismissal — never a toast.

Scheduled maintenance

Sync pauses on Sunday from 02:00 to 04:00 UTC.

Playground

Configure the component and copy synchronized Vue code.

Scheduled maintenance

Sync pauses on Sunday from 02:00 to 04:00 UTC.

Properties

Type

Variant

Content

Closable

Leading icon

Vue

<m-alert
  type="info"
  title="Could not sync data"
  text="Recent changes are stored on this device only."
/>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MAlert · All22 tokens

md-alert

md-alert-tonal-info-container-colorg($t, 'tonal.info.container.color')

System token--md-sys-color-secondary-container

md-alert-tonal-success-container-colorg($t, 'tonal.success.container.color')

System token--md-sys-color-tertiary-container

md-alert-tonal-warning-container-colorg($t, 'tonal.warning.container.color')

System token--md-sys-color-primary-container

md-alert-tonal-error-container-colorg($t, 'tonal.error.container.color')

System token--md-sys-color-error-container

md-alert-tonal-error-content-colorg($t, 'tonal.error.content.color')

System token--md-sys-color-on-error-container

md-alert-outlined-error-outline-colorg($t, 'outlined.error.outline.color')

System token--md-sys-color-error

md-alert-outlined-error-content-colorg($t, 'outlined.error.content.color')

System token--md-sys-color-on-surface

MAlert API

Props, slots, and events are generated from the current public kit contract.

MAlert

Feedback family

src/runtime/components/ui/alert

Props

NameTypeDefault

typeSeverity that selects the visual scheme and automatic announcement level.

'info' | 'success' | 'warning' | 'error''info'

variantSurface treatment of the alert container.

Extract<MVariant, 'tonal' | 'outlined'>'tonal'

titlePlain-text heading; the title slot takes precedence.

string''

textPlain-text message; the default slot takes precedence.

string''

iconExplicit leading icon name; false leaves the icon area empty.

string | falsefalse

closableRenders the dismiss control.

booleanfalse

closeLabelAccessible name of the dismiss control.

string'Close'

announceLive-region behavior; auto is assertive only for errors.

'auto' | 'polite' | 'assertive' | 'off''auto'

Slots

Events

MAlert does not emit component-specific events. Native events fall through to its root element.