This component is used sparingly to denote important information.
Some examples of where this could be used include:
- To indicate a successful submission of a form or action
- Inside of documentation when context is needed
- Indicating a dangerous action like deleting or a potentially unwanted action like leaving without saving
How this should be used:
- The default, subtle variant should be used for triggered information such as toast messages
- The left-accent variant should be used for static information such as important information in documentation
- Additionaly, the
CloseButtoncomponent can be added to an alert to make it dismissable.
There are 4 statuses with default styling based off of our
Although Chakra-ui supports many styling types, we will only use the
left-accent variants that can be seen below.
subtle variant is the default. No props are needed to denote this.
left-accent variant is great for inline information. It requires the variant prop to be denoted.