Skip to main content

Banner

Highlights important information or required actions prominently within the interface. Use to communicate statuses, provide feedback, or draw attention to critical updates.

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
'success' | 'info' | 'auto' | '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.
Was this section helpful?

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.

Was this section helpful?

Code

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

Preview

Anchor to best-practicesBest Practices

  • Use banners thoughtfully and sparingly, and only for the most important information. Too many banners distract customers from completing checkout.

  • Banners are typically displayed at the top of a page or a section, if they relate to specific content. Place banners below the relevant page or section header.

  • Include a Button component with next steps when possible.

  • Make banners dismissible, unless they contain critical information or an important step that customers need to take.

  • Use the info banner to update customers about a change or to give them advice.

  • Use the warning banner to display information that needs attention or that customers need to take action on. Warning banners can be stressful for customers, so be cautious about using them.

  • Use the critical banner to communicate problems that customers need to resolve immediately to complete checkout.

Was this section helpful?