Skip to main content

Banner

The Banner component highlights important information or required actions prominently within the POS interface. Use banners to communicate critical updates, warnings, informational messages, or success notifications that require merchant attention in a persistent but non-interruptive way.

The component provides persistent visibility for important messages while remaining non-intrusive to the main workflow, with support for dismissible and non-dismissible states. It includes automatic color coding based on message severity and integrates with the POS design system to maintain visual consistency across different alert types and use cases.

Anchor to propertiesProperties

Configure the following properties on the Banner component.

Anchor to heading
heading
string
Default: ''

The title text displayed prominently at the top of the banner. Should be concise and clearly communicate the main message or purpose of the banner.

Anchor to hidden
hidden
boolean
Default: false

Whether the banner is visible or hidden. When set to true, the banner will be hidden from view. Use this to programmatically show or hide banners based on app state.

Anchor to id
id
string

A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

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

Sets the visual appearance of the banner. The tone determines the color scheme. Available options:

  • 'auto' - Lets the system automatically choose the appropriate tone based on context.
  • 'success' - Green styling for positive outcomes and successful operations.
  • 'info' - Blue styling for general information and neutral updates.
  • 'warning' - Orange styling for important notices that require attention.
  • 'critical' - Red styling for errors and urgent issues requiring immediate action.
Was this section helpful?

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 primary action element displayed within the banner, typically a button. Use this slot to provide interactive elements that allow users to respond to the banner's message, such as "Dismiss," "Learn More," or "Retry" buttons.

Was this section helpful?

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>

Preview

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 section helpful?

Anchor to limitationsLimitations

  • The Banner component only accepts a heading property for text content and doesn't support body content. You can't place <s-text> or other text elements inside the banner as children.
Was this section helpful?