We will be updating this content to our new principle-based format in the near future.
Alerts are a great way to provide contextual feedback to a user.
The usage of the Alert component is derived from the context it will be placed in. There are four Alert variations - info, success, warning, and danger. By default, the Info Alert should be used, with the stateful Alerts being placed to either confirm an action or inform the user that the action may be dangerous (e.g. deleting data).
Container: This wraps the component. By default, it extends the full width of its parent.
Title (Optional): This can be added to the Alert when the Description alone is not sufficient enough.
Description: This explains the Alert and is always required.
Icon: The icon is always present, however changes depending on the State of the Alert component.
4Sizing & Spacing
The Alert is only available in one size. It can, however, grow vertically depending on the length of the description provided.
5Hierarchy & Placement
Alerts should generally be placed above the content in which they are referring to.
The Alert Component has four states - info, success, warning, and danger.
Each Alert comes in two variations - Title & Description, and just a Description.