Skip to main content

Banner

The banner component highlights important information or required actions prominently within the interface. Use banner to communicate statuses, provide feedback, draw attention to critical updates, or guide users toward necessary actions.

Banners support multiple tones to convey urgency levels, optional actions for next steps, and can be positioned contextually within sections or page-wide at the top. For inline status indicators on individual items, use badge.

Support
Targets (24)

Supported targets

  • customer-account.footer.render-after
  • customer-account.order-index.announcement.render
  • customer-account.order-index.block.render
  • customer-account.order-status.announcement.render
  • customer-account.order-status.block.render
  • customer-account.order-status.cart-line-item.render-after
  • customer-account.order-status.cart-line-list.render-after
  • customer-account.order-status.customer-information.render-after
  • customer-account.order-status.fulfillment-details.render-after
  • customer-account.order-status.payment-details.render-after
  • customer-account.order-status.return-details.render-after
  • customer-account.order-status.unfulfilled-items.render-after
  • customer-account.order.action.menu-item.render
  • customer-account.order.action.render
  • customer-account.order.page.render
  • customer-account.page.render
  • customer-account.profile.addresses.render-after
  • customer-account.profile.announcement.render
  • customer-account.profile.block.render
  • customer-account.profile.company-details.render-after
  • customer-account.profile.company-location-addresses.render-after
  • customer-account.profile.company-location-payment.render-after
  • customer-account.profile.company-location-staff.render-after
  • customer-account.profile.payment.render-after

Anchor to propertiesProperties

Anchor to collapsible
collapsible
boolean
Default: false

Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them.

Anchor to dismissible
dismissible
boolean
Default: false

Determines whether the close button of the banner is present.

When the close button is pressed, the dismiss event will fire, then hidden will be true, any animation will complete, and the afterhide event will fire.

Anchor to heading
heading
string
Default: ''

The title of the banner.

Anchor to hidden
hidden
boolean
Default: false

Determines whether the banner is hidden.

If this property is being set on each framework render (as in 'controlled' usage), and the banner is dismissible, ensure you update app state for this property when the dismiss event fires.

If the banner is not dismissible, it can still be hidden by setting this property.

Anchor to id
id
string

A unique identifier for the element.

Anchor to tone
tone
'info' | 'auto' | 'success' | 'warning' | 'critical'
Default: 'auto'

Sets the tone of the Banner, based on the intention of the information being conveyed.

The banner is a live region and the type of status will be dictated by the Tone selected.

  • critical creates an assertive live region that is announced by screen readers immediately.
  • neutral, info, success, warning and caution creates an informative live region that is announced by screen readers after the current message.

Anchor to eventsEvents

Learn more about registering events.

Anchor to afterhide
afterhide
<typeof tagName>

Event handler when the banner has fully hidden.

The hidden property will be true when this event fires.

Anchor to dismiss
dismiss
<typeof tagName>

Event handler when the banner is dismissed by the user.

This does not fire when setting hidden manually.

The hidden property will be false when this event fires.

Examples
<s-banner heading="Free shipping on all orders." tone="info"></s-banner>

Preview

Anchor to best-practicesBest Practices

  • Use banners sparingly and only for important information. Too many banners can distract from the main content.
  • Place banners at the top of a page or section, below the relevant header.
  • Include a Button with a next step whenever possible.
  • Make banners dismissible unless they are critical or require action.
  • Use info for general updates or advice.
  • Use warning to highlight things that need attention. Use sparingly as it can add stress.
  • Use critical for problems that must be resolved.
Was this page helpful?