Skip to main content

Alert

Component
Live

The Alert component highlights important information, warnings, or feedback to the user.

FigmaCode

Usage​

Alerts draw attention to important information and are typically triggered by a user interaction. Alerts can include a single line of text, or they can be formatted to include a title and body content. There 4 variants: success, warning, error, and information. Alerts can be dismissible or persistent.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Alert } from "@iag/chroma-react-ui.components";

When to use​

Use Alerts to attract a users attention to important feedback or information.

When to avoid​

Avoid using Alerts for non-important or general informational content. Also avoid to show the validation status of an individual form field - as an alternative, consider the Message component.

Do

  • Do keep Alerts brief, but provide enough information so people can understand the issue. This is especially true for error alerts.
  • Do make sure Alerts are visually consistent across the app.
  • Do use the appropriate variant for the information being communicated. (See Variants below.)
  • Do use Alerts to summarise validation errors at the top of a form.

Don't

  • Don't use the Error variant for non-critical messages.
  • Don't forget to test the visibility and accessibility of your alerts.
  • Don't overuse Alerts as people can become de-sensitised when used frequently.

Variants​

There are 4 Alert variants. Each variant has specific styling.

  • Information: provides valuable information that is not critical.
  • Success: informs when an action has been successful performed.
  • Warning: warns of a possible negative outcome.

  • Error: indicates an issue or error that needs to be addressed before the end-user can continue