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 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 tone
tone
"info" | "success" | "warning" | "critical" | "auto"
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> | null
Anchor to dismiss
dismiss
<typeof tagName> | null

Anchor to slotsSlots

Anchor to children
children
HTMLElement

The content of the Banner.

Anchor to secondary-actions
secondary-actions
HTMLElement

The secondary actions to display at the bottom of the Banner.

Only Buttons with the variant of "secondary" or "auto" are permitted. A maximum of two s-button components are allowed.

Examples
<s-banner heading="Order archived" tone="info" dismissible>
This order was archived on March 7, 2017 at 3:12pm EDT.
</s-banner>

Preview

Anchor to useful-forUseful for

  • Showing important information or changes
  • Prompting merchants to take a specific action
  • Displaying warnings, errors, or critical information
  • Communicating persistent conditions that need attention

Anchor to outside-of-a-sectionOutside of a section

Banners placed outside of a section will display in their own card and should be located at the top of the page. They're useful for conveying messages that apply to the entire page or areas not visible within the viewport, such as validation errors further down the page.

Anchor to in-a-sectionIn a section

Banners placed inside a section will have styles applied contextually. They're useful for conveying messages relevant to a specific section or piece of content.

Anchor to best-practicesBest practices

  • Seeing these banners can be stressful, so use them sparingly to avoid overwhelming users.
  • Focus on a single piece of information or required action to avoid overwhelming users.
  • Make the message concise and scannable. Users shouldn’t need to spend a lot of time figuring out what they need to know and do.
  • Info, Warning and Critical banners should contain a call to action and clear next steps. Users should know what to do after seeing the banner.
  • Avoid banners that can't be dismissed unless the user is required to take action.

Anchor to content-guidelinesContent guidelines

  • Keep titles concise and clear
  • Limit body content to 1-2 sentences where possible
  • Use action-led buttons with strong verbs (e.g., "Activate Apple Pay" not "Try Apple Pay")
  • Avoid unnecessary words and articles in button text
  • For warning and critical banners, explain how to resolve the issue
Was this page helpful?