Feedback

Banner

A persistent situation that needs a decision — wide, inline, and never blocking.

Playground

Configure the component and copy synchronized Vue code.

Properties

Variant

Layout

Content

Closable

Leading icon

Vue

<m-banner
  icon="round-cloud-off"
  title="Synchronization is off"
>
  Changes are stored on this device only.

  <template #actions>
    <m-button variant="text">Learn more</m-button>
    <m-button variant="text">Set up sync</m-button>
  </template>
</m-banner>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MBanner · All28 tokens

md-banner

md-banner-root-gapg($t, 'root-gap')

Resolved value16rem

md-banner-root-padding-blockg($t, 'root-padding-block')

Resolved value16rem

md-banner-root-padding-inlineg($t, 'root-padding-inline')

Resolved value16rem

md-banner-content-gapg($t, 'content-gap')

Resolved value4rem

md-banner-actions-gapg($t, 'actions-gap')

Resolved value8rem

md-banner-actions-margin-blockg($t, 'actions-margin-block')

Resolved value12rem

md-banner-root-min-heightg($t, 'root-min-height')

Resolved value54rem

md-banner-root-shapeg($t, 'root-shape')

System token--sys-shape-corner-none

md-banner-auto-thresholdg($t, 'auto-threshold')

Resolved value768px

md-banner-surface-divider-widthg($t, 'surface-divider-width')

Resolved value1rem

md-banner-close-sizeg($t, 'close-size')

Resolved value40rem

md-banner-close-shapeg($t, 'close-shape')

System token--sys-shape-corner-full

md-banner-surface-container-colorg($t, 'surface-container-color')

System token--md-sys-color-surface

md-banner-surface-content-colorg($t, 'surface-content-color')

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

md-banner-surface-divider-colorg($t, 'surface-divider-color')

System token--md-sys-color-outline-variant

md-banner-tonal-container-colorg($t, 'tonal-container-color')

System token--md-sys-color-surface-container-high

md-banner-tonal-content-colorg($t, 'tonal-content-color')

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

md-banner-icon-colorg($t, 'icon-color')

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

md-banner-close-colorg($t, 'close-color')

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

MBanner API

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

MBanner

Feedback family

src/runtime/components/ui/banner

Props

NameTypeDefault

titlePlain-text title; the `title` slot takes precedence.

stringundefined

textPlain-text body; the default slot takes precedence.

stringundefined

iconLeading icon. There is no default: the banner has no severity to infer one from. `false` suppresses an icon supplied by a wrapper preset.

string | falseundefined

layoutPresentation of the actions row.

'auto' | 'inline' | 'stacked''auto'

variantNeutral surface preset.

'surface' | 'tonal''surface'

closableRenders the dismiss control.

booleanfalse

closeLabelAccessible name of the dismiss control.

string'Close'

announceLive-region politeness.

'polite' | 'off''polite'

Slots

Events

@closevoid