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.

The Alert is designed to display a message below the main heading at the top of the page. If you wish to use the alert in a different location, you can set the prop role to the value presentation which will ensure that it is not given an implicit live region and interrupt users using assistive tech.

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