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.

Editable Example

Left Accent

The left-accent variant is great for inline information. It requires the variant prop to be denoted.

Editable Example