Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts are available for any length of text, as well as an optional
dismiss button. For proper styling, use one of the eight
Using color to add meaning only provides a visual indication, which will not
be conveyed to users of assistive technologies – such as screen readers.
Ensure that information denoted by the color is either obvious from the
content itself (e.g. the visible text), or is included through alternative
means, such as additional text hidden with the
For links, use the
<Alert.Link> component to provide matching
colored links within any alert.
Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy.
dismissible prop to add a functioning dismiss
button to the Alert.
You can also control the visual state directly which is great if you want to build more complicated alerts.