Alert
Attract user attention with important static message
Import
Source
Docs
Package
Usage
Bummer!
Color
Shades
Radius
xs
sm
md
lg
xl
Variant
Accessibility
- Root element role set to
alert - Set
closeButtonLabelprop to make close button visible for screen readers
Alert component props
| Name | Type | Description |
|---|---|---|
| children * | ReactNode | Alert message |
| closeButtonLabel | string | Close button aria-label |
| color | MantineColor | Key of theme.colors |
| icon | ReactNode | Icon displayed next to the title |
| onClose | () => void | Called when close button is clicked |
| radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
| title | ReactNode | Alert title |
| variant | Variants<"outline" | "light" | "filled"> | Controls Alert background, color and border styles, "light" by default |
| withCloseButton | boolean | Determines whether close button should be displayed, false by default |
Alert component Styles API
| Name | Static selector | Description |
|---|---|---|
| root | .asuikit-Alert-root | Root element |
| wrapper | .asuikit-Alert-wrapper | Wraps body and icon |
| body | .asuikit-Alert-body | Body element, wraps title and message |
| title | .asuikit-Alert-title | Title element, contains label and icon |
| label | .asuikit-Alert-label | Title label |
| message | .asuikit-Alert-message | Alert message, defined by children |
| icon | .asuikit-Alert-icon | Icon wrapper |
| closeButton | .asuikit-Alert-closeButton | Close button, defined by withCloseButton prop |