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 (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to collapsible
collapsible
boolean
Default: false

Whether the banner content can be collapsed and expanded by the user. A collapsible banner conceals child elements initially, allowing the user to expand the banner to reveal them.

Anchor to dismissible
dismissible
boolean
Default: false

Whether the banner displays a close button that allows users to dismiss it.

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

Anchor to heading
heading
string
Default: ''

The heading text displayed at the top of the banner to summarize the message or alert.

Anchor to hidden
hidden
boolean
Default: false

Controls whether the banner is visible or hidden.

When using a controlled component pattern and the banner is dismissible, update this property to true when the dismiss event fires.

You can hide the banner programmatically by setting this to true even if it's not dismissible.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

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

The semantic meaning and color treatment of the component. The banner is a live region and the type of status is dictated by the tone selected.

  • info: Informational content or helpful tips.
  • auto: Automatically determined based on context.
  • success: Positive outcomes or successful states.
  • warning: Important warnings about potential issues.
  • critical: Urgent problems or destructive actions.

The critical tone creates an assertive live region that is announced by screen readers immediately. The info, success, and warning tones create 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>

A callback that fires when the banner has fully hidden, including after any hide animations have completed.

The hidden property is true when this event fires.

Anchor to dismiss
dismiss
<typeof tagName>

A callback that fires when the banner is dismissed by the user clicking the close button.

This doesn't fire when setting hidden manually.

The hidden property is 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 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 page helpful?