Alert
Content boxes
Demo
Summarize the message in just a few words (optional)
Limit the informational message to 1-2 short sentences. Use the present tense for clarity. You can include an inline link or place a single link at the end of the message. Inline linkConfirm the action in just a few words (optional)
Confirm the action is complete in a sentence or two. Use simple verb tenses for clarity. Use the present tense when possible. Don't use the words "success" or "successfully" to keep messages fresh and engaging. You can include an inline link or place a single link at the end of the message. Inline linkSummarize the warning in just a few words (optional)
Limit the warning to 1-2 short sentences. Use the present tense for clarity. You can include an inline link or place a single link at the end of the message. Inline linkSummarize what went wrong in just a few words (optional)
Briefly describe the issue, what caused it, if known, and explain how to fix it. Use simple verb tenses for understanding and easier localization. You can include an inline link or place a single link at the end of the message. Inline linkAPI
Tag
| Name | Description |
<s-alert>
|
Custom Element, accepts content |
Attributes
| Name | Value | Required | Description |
status |
|
|
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 |
|
|
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 |
|
|
Sets the status of the alert. |
noDismiss |
Boolean |
Makes the alert non-dismissible. |
|
onS-dismiss |
Function |
Handles the |
Classes
| Name | Description |
|---|---|
border-radius-lg |
Increases the border radius of the alert |
no-icon |
Hides the status icon |
Skylab React links
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.
Links in Alerts
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