Alert
Attract user attention with important static message
Import
Source
Docs
Package
Usage
Bummer!
Color
Radius
xs
sm
md
lg
xl
Variant
Accessibility
- Root element role set to
alert
- Set
closeButtonLabel
prop 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 | Color from theme.colors |
icon | ReactNode | Icon displayed next to title |
onClose | () => void | Called when close button is clicked |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Radius from theme.radius, or number to set border-radius in px, defaults to theme.defaultRadius |
title | ReactNode | Alert title |
variant | "outline" | "light" | "filled" | Controls Alert background, color and border styles, defaults to light |
withCloseButton | boolean | True to display close button |
Alert component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Alert-root | Root element |
wrapper | .mantine-Alert-wrapper | Wraps body and icon |
body | .mantine-Alert-body | Body element, wraps title and message |
title | .mantine-Alert-title | Title element, contains label and icon |
label | .mantine-Alert-label | Title label |
message | .mantine-Alert-message | Alert message, defined by children |
icon | .mantine-Alert-icon | Icon wrapper |
closeButton | .mantine-Alert-closeButton | Close button, defined by withCloseButton prop |