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
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Anchor to PropertiesProperties
Configure the following properties on the banner component.
- stringstringDefault: ''Default: ''
The title of the banner.
- booleanbooleanDefault: falseDefault: false
Determines whether the banner is hidden.
- stringstring
A unique identifier for the element.
- 'auto' | 'info' | 'success' | 'warning' | 'critical''auto' | 'info' | 'success' | 'warning' | 'critical'Default: 'auto'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.
- HTMLElementHTMLElement
The action taken when the banner is pressed.
Anchor to ExamplesExamples
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 Best practicesBest practices
- Apply appropriate tones: Use
criticalfor errors requiring immediate action,warningfor important notices,successfor confirmations,infofor 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?