4.53.0

Alert

Content boxes

Demo

API

Tag

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

Attributes

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

Sets the status of the alert.
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 alert non-dismissible.

Properties

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

Sets the status of the alert.
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 alert non-dismissible.

Classes

Name Description
border-radius-lg Increases the border radius of the alert
no-icon Hides the status icon

Events

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

Fired when the Alert is dismissed.

Demo

API

Tag

Name
<SAlert>

Props

Name Value Required Description
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
status
  • info
  • success
  • warning
  • error

Sets the status of the alert.
noDismiss Boolean

Makes the alert non-dismissible.
onS-dismiss Function

Handles the s-dismiss event fired when the user clicks the dismiss button. The dismissed SAlert's id is available on e.detail.

Classes

Name Description
border-radius-lg Increases the border radius of the alert
no-icon Hides the status icon

Skylab React links

General information about using our React package

i18n Strings

ID Description Default value
"alert.ariaLabel.dismiss" The dismiss button's aria-label. Dismiss alert

Guidelines

Accessibility

Alert sets role="alert" when its status is error or warning, and role="status" when its status is info or success.

Assign the margin-start-sm class to an inline link that follows text in an Alert, in order to separate it visually from the text. In addition, when combining text and links in Alerts, you must wrap the text in a <div>.

Design

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