Skip to main content

Message

Component
Live

The Message component displays contextual text based alerts to users.

FigmaCode

Usage​

Messages displays in-context information in relation to a form field or other element. They are typically triggered by a user interaction and include only a single line of text or hyperlink. There are 4 variants: success, warning, error, and information. Messages are not dismissible.

Installation​

Install

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

Import

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

When to use​

Use Messages to provide information to the user about an individual form field or element. For example, an error Message can be displayed under an input field to inform a user it needs to be completed in order to proceed.

When to avoid​

Avoid using Messages for overall flow or page alerts, as a Message should refer to only a single element. Also avoid where the information is critical, needs to stand out, or needs to be dismissible. In these cases, consider the Alert component.

Do

  • Do keep Message labels brief, but do provide enough information so people can understand the issue. This is especially true for errors in order for the user to recover.
  • Do use the appropriate variant for the information being communicated. (See Variants below.)
  • Do ensure the proximity to the form field or element it relates to makes it’s relationship clear.
  • Do make sure Messages are visually consistent across the app.

Don't

  • Don't use the Error variant for non-critical Messages.
  • Don't forget to test the visibility and accessibility of your Messages.

Variants​

There are 4 Message 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.