4.53.0

Banner

System-wide notification boxes

Demo

API

Tag

Name Description
<s-banner> Custom Element, accepts content

Attributes

Name Value Required Description
status
  • info
  • success
  • warning
  • error

Sets the status of the banner. Banner will default to plain styling.
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
nodismiss Boolean attribute

Makes the banner non-dismissible.

Properties

Name Value Required Description
status
  • info
  • success
  • warning
  • error

Sets the status of the banner. Banner will default to plain styling.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
noDismiss Boolean attribute

Makes the banner non-dismissible.

Events

Name Detail Description
s-dismiss The dismissed banner's id is available on e.detail

Fired when the banner is dismissed.

Slots

Slots are only available on the plain banner (no status attribute).

Name Required Description
media

A 30px container for an image (30px) or icon (24px) displayed at the start of the banner. Use <img slot="media"> for images or <s-icon slot="media" class="medium"> for icons.
action

An action button displayed after the banner text.

Demo

Tag

Name
<SBanner>

Slots

See slots above. Slots are only available on the plain banner (no status prop).

Props

Name Value Required Description
status
  • info
  • success
  • warning
  • error

Sets the status of the banner. Banner will default to plain styling.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
nodismiss Boolean

Makes the banner non-dismissible.
onS-dismiss Function

Handles the s-dismiss event fired when the banner is dismissed. The dismissed banner's id is available on e.detail.

Skylab React links

General information about using our React package

i18n Strings

ID Description Default value
"banner.ariaLabel.close" The aria-label used for the close button. Close

Guidelines

Accessibility

Banner content is set to role="alert" when its status is error or warning. This role is not appropriate for less severe statuses.

Assign the margin-start-sm class to an inline link that follows text in an banner, in order to separate it visually from the text.

Plain banner with media and action

The plain banner (no status) supports two named slots:

  • media — A 30px container at the start of the banner. Place a 30px <img> or a 24px <s-icon class="medium"> inside. The icon is centered within the 30px container.
  • action — An action button after the text.

These slots are not available on status banners (info, success, warning, error).

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com