Message types include authentication, information, confirmation, warnings, and error messages. Identify the type of content the message falls under in order to choose the relevant color and icon.

Message types

Banners

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. Learn more about banners

Banner message example with a red error message.

Inline dialogs

Inline dialogs 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. Learn more about inline dialogs.

Inline dialog message attached to a warning icon.

Flags

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. Learn more about flags

Flag message example confirming when someone has been added to a group.

Section messages

Section messages are used to alert the user of something that has happened in a specific section of the screen. They appear above the affected area (for example, Issue experience in Jira). Learn more about section messages

A section message example showing confirmation of a successfully merged pull request.

Colors

Message types use colors and icons to help indicate content and urgency. The available message types are information, success, warning, danger (error), and discovery (new).

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.

Icons showing different icons and colors we use in messages. Informative messages use a blue circle icon with an i inside, success is a green check icon, warning is a yelowish triangle icon with an exclamation mark, danger is a red diamond icon with an exclamation mark, and discovery or new is a purple circle with a question mark inside.

Make sure you use the right color role for your situation. For example, yellow typically implies warning, while green can imply success. See our color guideline for all color roles.

Icons

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

Five different icon states for a padlock in various shades of blue.
  1. Resting

  2. Hover

  3. Selected

  4. Active

  5. Focus


Was this page helpful?

We use this feedback to improve our documentation.