Banner
System-wide notification boxes
Demo
API
Tag
| Name | Description |
<s-banner>
|
Custom Element, accepts content |
Attributes
| Name | Value | Required | Description |
status |
|
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 |
|
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. |
Demo
Tag
| Name |
<SBanner>
|
Props
| Name | Value | Required | Description |
status |
|
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 |
Skylab React links
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.
Links in banners
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.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com