Banner

Material Design 3 banner for prominent, persistent messages with optional supporting text and actions. Not intended for ephemeral feedback; use a snackbar when the message should auto-dismiss.

Basic Usage

Show a default banner with a message and dismiss button. Banners remain in flow so users can act while retaining context. 

<ds-banner open message="This is a banner message."></ds-banner>

Initial Value

Pre-configure variant, dismissibility, and supporting content.

Renew now to avoid service interruption.
Renew 
<ds-banner
  open
  variant="warning"
  dismissible="false"
  message="Your subscription expires soon.">
  <span slot="supporting-text">Renew now to avoid service interruption.</span>
  <div slot="actions">
    <ds-button variant="text">Renew</ds-button>
  </div>
</ds-banner>

Variants

Use semantic variants to align banner tone with message intent.

<ds-banner open variant="info" message="New features are available."></ds-banner>
<ds-banner open variant="error" message="Failed to sync your data."></ds-banner>

States

Control visibility and dismiss behavior with attributes and methods. 

const banner = document.querySelector('#banner-state-dismissible');
banner.show({ message: 'Updated content', variant: 'info' });
banner.hide();

Interactive Example

Toggle banner variant and visibility while observing emitted events.

API

Attributes

Attribute Type Default Description
message string "" Primary banner message text.
variant string default default, info, warning, error, or success.
dismissible boolean true Controls whether the dismiss button is shown.
open boolean false Controls visibility state.

Properties

Property Type Description
message string Reflects the message attribute.
variant string Reflects the variant attribute.
dismissible boolean Reflects dismissible behavior.
open boolean Reflects visibility state.

Events

Event Detail Description
ds-banner:show { message, variant } Fired when banner is shown.
ds-banner:dismiss { message } Fired when banner is dismissed.
ds-banner:action { actionIndex, message } Fired when an action button with .action-button is clicked.

Methods

Method Description
show(options) Shows the banner with optional message and variant.
hide() Hides the banner and emits dismiss event.

CSS Parts

Part Description
container Main banner container.
icon Icon container.
content Message and supporting content container.
message Primary message element.
supporting-text Supporting text container.
actions Actions container slot wrapper.
dismiss-button Dismiss button element.

CSS Custom Properties

Property Description
--ds-banner-padding-inline Horizontal container padding. Default var(--ds-space-4).
--ds-banner-padding-block Vertical container padding. Default var(--ds-space-4).
--ds-banner-gap Gap between icon/content/actions. Default var(--ds-space-4).
--ds-banner-icon-size Icon size. Default var(--ds-size-icon-lg).
--ds-banner-dismiss-size Dismiss button size. Default var(--ds-size-control-md).

Accessibility

Keyboard Interaction

Key Context Expected Result
Tab / Shift+Tab Banner open with controls Moves focus through dismiss and action buttons
Enter / Space Focus on a banner button Activates the focused button action

Semantics

  • Host uses role="region" with aria-label="Banner notification".
  • aria-hidden tracks open state.
  • A hidden status live region announces shown messages.

Usage Guidelines

  • When to use: Use banners for persistent, high-priority information that should remain visible while the user continues working.
  • When not to use: Avoid banners for short-lived confirmations or low-priority status updates; use snackbars for those.
  • Composition: Keep copy concise and include a clear optional action. Use non-dismissible banners only when an explicit user decision is required.
  • Common mistakes: Showing multiple banners at once causes visual overload and weakens hierarchy.