Skip to main content

Banner

The Banner component highlights important information or required actions. Use banners to communicate critical updates, warnings, informational messages, or success notifications that require merchant attention.

Banners provide persistent visibility with support for dismissible and non-dismissible states.

Support
Targets (10)

Supported targets

Use cases

  • System alerts: Display alerts about maintenance, outages, or important updates.
  • Error messages: Show critical errors like payment failures or connectivity issues.
  • Success feedback: Communicate successful completion of actions like order processing or sync.
  • Warnings: Alert merchants to low inventory, expired payments, or business-critical conditions.

Anchor to examplesExamples

Anchor to example-display-important-messages-with-a-bannerDisplay important messages with a banner

Display important messages using a Banner component with automatic color coding based on message severity. This example shows a basic banner with a heading and descriptive text.

Display important messages with a banner

Display important messages with a banner

<s-banner heading="Marked as delivered" tone="success">
<s-button slot="primary-action">Dismiss</s-button>
</s-banner>

<s-banner heading="Ready for shipping" tone="info">
<s-button slot="primary-action">Dismiss</s-button>
</s-banner>

<s-banner heading="Couldn't restock items" tone="warning">
<s-button slot="primary-action">Dismiss</s-button>
</s-banner>

<s-banner heading="Action failed. Contact developer" tone="critical">
<s-button slot="primary-action">Dismiss</s-button>
</s-banner>

Anchor to propertiesProperties

Configure the following properties on the Banner component.

Anchor to heading
heading
string
Default: ''

The title of the banner.

Anchor to hidden
hidden
boolean
Default: false

Determines whether the banner is hidden.

Anchor to id
id
string

A unique identifier for the element.

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

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

Anchor to slotsSlots

The Banner component supports slots for additional content placement within the banner. Learn more about using slots.

Anchor to primary-action
primary-action
HTMLElement

The action taken when the Banner is pressed.

Anchor to best-practicesBest practices

  • Apply appropriate tones: Use critical for errors requiring immediate action, warning for important notices, success for confirmations, info for general information.
  • Keep headings concise: Write brief headings that clearly communicate the message. Use the collapsible feature for additional detail.
  • Show one banner at a time: Display only one banner to avoid overwhelming the interface. Prioritize by importance.
  • Make non-critical banners dismissible: Allow dismissal for non-critical information. Keep critical alerts non-dismissible until resolved.
  • Include clear actions: If action is needed, use the primaryAction slot to provide clear next steps.
  • Use for persistent messages: Use banners for messages that need to persist. For temporary notifications, consider toast notifications.
Was this page helpful?