Message content can include authentication, information, confirmation, warnings, and error messages. It is important to specify which type of content the message falls under in order to choose the relevant color and correct icon.

Flags are used for confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear by overlaying content at the bottom left of the screen, emerging from the navigation sidebar. Find out more about flags

Inline messages consist of an icon and a message that's revealed when a user hovers over the icon. Use inline dialogs to alert people to a required action or important information. Find out more about inline dialogs.

Banners appear at the top of the screen and shift the content below it. They should only be used for critical system-level messaging (warnings and errors) about loss of data or functionality. Find out more about banners

Message types are assigned appropriate colors and icons to help indicate content and urgency. The available message types are authentication, confirmation, warning, error, and information. Setting the right color and icon for a message ensures people understand the nature of the message at a glance, and that they take appropriate action.

  1. Authentication (B400): Allows the user to verify their identity.

  2. Confirmation (G300): Provides a positive response to user actions.

  3. Warning (Y300): Used to help users avoid error situations. Consists of a description of potential errors. It should provide a recommended next step, and an option to be reminded at a later date.

  4. Error (R300): Shown when something goes wrong, or when the user is denied access. This should also provide recommended next steps, or a path forward.

  5. Info (P300): Conveys information to help the user understand minor contextual or state changes. These are typically not in response to a user action.

The appearance of icons changes depending on the current state. This visual indicator makes it easier for people to interpret the message.

  1. Resting

  2. Hover

  3. Selected

  4. Active

  5. Focus