Skip to main content

Alert

Informs users of important information or changes.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Information Example​

Use Information alerts for general informational messages.

Success Example​

Use Success alerts to communicate that a task was completed successfully.

Warning Example​

Use Warning alerts to indicate a potential issue that users should be aware of.

Error Example​

Use Error alerts to show that an error has occurred.

Dismissible Example​

If the alert is not critical and does not require immediate attention, you can make it dismissible.

Form Validation Alert​

It's important when form errors are triggered to give focus to the <Alert> component when it displays so that the <Alert /> heading and links are announced by the screen reader.

The <Link /> onClick event can be triggered via a keyboard (tested in VoiceOver) and then Tab will take you to the associated field that is in error and the error message will be announced.

When associating a <Alert /> error message with an invalid form input, set the <Link /> hrefto the<FormGroup /> id like the example below.

Properties​

Name
Description
  • children*
    ReactNodeContent to be displayed inside the Alert. It will be treated as the body message
  • className
    stringAdditional CSS classes to be applied
  • dismissible
    booleanIf true, adds a close button to the Alert, allowing users to dismiss it. When dismissed, the onClose callback is triggered
  • id
    stringHTML id attribute for the component
  • onClose
    () => voidCallback function triggered when the close button is clicked
  • role
    stringARIA role attribute for accessibility. Defaults to "status"
  • variant*
    "information" | "success" | "warning" | "error"Type of alert. Should be one of the predefined types in ALERT_TYPES: "information", "success", "warning", or "error"

CSS Variables​