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.
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="info | success | warning | danger" to change the type of alert.
Use role="alert" for critical messages that require immediate attention.
Use role="status" for less critical messages.
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-icon-size) |
| --dsc-alert-padding-block | var(--ds-size-6) |
| --dsc-alert-padding-inline-end | var(--ds-size-6) |
No relevant data attributes found.