Alert Component
This component is used sparingly to denote important information.
Usage
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
CloseButton
component can be added to an alert to make it dismissable.
Status
There are 4 statuses with default styling based off of our custom theme. The statuses available are:
- Success
- Info
- Warning
- Danger
Variants
Although Chakra-ui supports many styling types, we will only use the subtle
and left-accent
variants that can be seen below.
Subtle
The subtle
variant is the default. No props are needed to denote this.
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Chakra is going live on August 30th. Get ready!
Data uploaded to the server. Fire on!
Editable Example
Left Accent
The left-accent
variant is great for inline information. It requires the variant prop to be denoted.
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Chakra is going live on August 30th. Get ready!
Data uploaded to the server. Fire on!
Editable Example