Alerts are used to communicate a state that affects a system, feature or page.
Chakra UI exports 4 alert related components.
Alert: The wrapper for alert components.
AlertIcon: The visual icon for the alert that changes based on the
AlertTitle: The title of the alert to be announced by screen readers.
AlertDescription: The description of the alert to be announced by screen readers.
Change the status of the alerts by passing the
status prop. This affects the
color scheme and icon used. Alert supports
Alert has 4 variant styles you can use. Pass the
variant prop and use either
Alert ships with smaller component to allow for flexibility and make it easy to create all kinds of layout. Here's an example of custom alert style and layout.
Alert is the wrapper for alert component. It composes the
|status||The status of the alert|
|variant||The variant of the alert style to use.|
Icon and changes the icon based on the
AlertTitle composes the
AlertDescription composes the
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo