Components
Alert
Alert provides users with information that is especially important for them to see and understand. The component is designed to capture users' attention. The text in the alert should be short and clear.
HTML
Press Enter to start editing
Unable to parse html
const PreviewEn = () => { return <Alert>A message that is important for the user to see</Alert>; }; render(<PreviewEn />)
Usage
Use the attribute data-color to change the type of alert.
Read below for when to use role and aria-live.
Read about role and aria-live on the accessibility page for the alert component.
CSS variables and data attributes
| Name | Value |
|---|---|
| --dsc-alert-background | var(--ds-color-info-surface-tinted) |
| --dsc-alert-border-width | var(--ds-border-width-default) |
| --dsc-alert-border-style | solid |
| --dsc-alert-border-color | var(--ds-color-info-border-default) |
| --dsc-alert-border-radius | var(--ds-border-radius-md) |
| --dsc-alert-icon-color | var(--ds-color-info-text-subtle) |
| --dsc-alert-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E") |
| --dsc-alert-color | var(--ds-color-info-text-default) |
| --dsc-alert-spacing | var(--ds-size-2) |
| --dsc-alert-icon-size | var(--ds-size-7) |
| --dsc-alert-padding-block | var(--ds-size-6) |
| --dsc-alert-padding-inline-end | var(--ds-size-6) |
No relevant data attributes found.