Alert
Calcite Alerts are contextual pop-up style messages that can contain actions without obstructing the application.
Overview
Alerts are used to communicate to the user in an unobtrusive manner. They are primarily displayed as a response to the user taking action on an element; however they can also be used to communicate non-critical system messages, or to provide updates on actions the user has previously taken.
Try to avoid stacking Alerts. If you find a need to present the user with multiple Alerts at once, or when you want to interrupt the user, please consider using a Modal.
Refer to the UI state colors if you are unsure of what color Alert to use.
Usage
- Something important was deleted
- Confirming an important action
- An update is available
- Something was saved
- Something was downloaded
- A problem or error occurred
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Move focus to next item. If the current focus is the last item, the focus will leave the component |
Tab and Shift | Move focus to previous item. If the current focus is the first item, the focus will leave the component |
Writing and copy
Alerts are meant to quickly convey a message to the user. Consistent Alert structure, verbiage, and copy ensures that the user will have an expected experience across the platform. Keep copy short and to the point.
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| active | active | Is the alert currently active or not | truefalse | |
| autoDismiss | auto-dismiss | Close the alert automatically (recommended for passive, non-blocking alerts) | truefalse | |
| autoDismissDuration | auto-dismiss-duration | Duration of autoDismiss (only used with `autoDismiss`) | fastmediumslow | |
| color | color | Color for the alert (will apply to top border and icon) | blue (default)greenredyellow | |
| icon | icon | when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon | ||
| intlClose | intl-close | string to override English close text | "Close" (default) | |
| label | label | Accessible name for the component | undefined | |
| placement | placement | specify the placement of the alert | bottom (default)bottom-endbottom-starttoptop-endtop-start | |
| scale | scale | specify the scale of the alert, defaults to m | lm (default)s |
Events
| Name | Description | Detail |
|---|---|---|
| calciteAlertClose | Fired when an alert is closed | any |
| calciteAlertOpen | Fired when an alert is opened | any |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
Slots
| Name | Description |
|---|---|
| link | Optional action to take from the alert (undo, try again, link to page, etc.) |
| message | Main text of the alert |
| title | Title of the alert (optional) |
Styles
| Name | Description | CSS Variable |
|---|---|---|
| --calcite-alert-width | the width of the alert | --calcite-alert-width |