Skip to main content

Banner

Highlights important information or required actions prominently within the interface. Use to communicate critical updates, warnings, information or success messages in a prominent way.

Anchor to propertiesProperties

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.

Was this section helpful?

Anchor to slotsSlots

Anchor to primary-action
primary-action
HTMLElement

The action taken when the Banner is pressed.

Was this section helpful?

Code

<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 guidelinesGuidelines

  • Use when needing to communicate to merchants in a way that is persistent but non-interruptive.
  • Only one banner should be visible at a time.
Was this section helpful?