Alert

Alerts are a great way to provide contextual feedback to a user.

Overview

Alert TitleThis is the alert description. It provides context to the user, bringing attention to information that needs to be consumed.The Alert Component.

Usage

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).

Anatomy

Alert TitleThis is the alert description. It provides context to the user, bringing attention to information that needs to be consumed.The Alert Component.1Container3Description2Title4Icon
  1. Container. This wraps the component. By default, it extends the full width of its parent.
  2. Title (Optional). This can be added to the Alert when the Description alone is not sufficient enough.
  3. Description. This explains the Alert and is always required.
  4. Icon. The icon is always present, however changes depending on the State of the Alert component.

Sizing & Spacing

The Alert is only available in one size. It can, however, grow vertically depending on the length of the description provided.

Hierarchy & Placement

Alerts should generally be placed above the content in which they are referring to.

States

Success AlertThis is the alert description. It provides context to the user, bringing attention to information that needs to be consumed.Warning AlertThis is the alert description. It provides context to the user, bringing attention to information that needs to be consumed.Danger AlertThis is the alert description. It provides context to the user, bringing attention to information that needs to be consumed.Info AlertThis is the alert description. It provides context to the user, bringing attention to information that needs to be consumed.The Alert Component.

The Alert Component has four states - info, success, warning, and danger.

Variations

Each Alert comes in two variations - Title & Description, and just a Description.

Basic Usage

<Alert title="Alert Title" variant={ALERT_VARIANT.WARNING}>
  This is the alert description.
</Alert>

Alert Properties

NameTypeRequiredDefaultDescription
childrenstringTruen/aContent of the alert.
onClosefuncFalsen/aOptional callback which is invoked when the alert is closed.
titlestringFalsen/aTitle of the alert.
variantstringFalseinfoVariant of the alert, can be `danger`, `info`, `success` or `warning`.