Messages

Messages are used by the system to communicate conditions, events, and responses to user actions. Messages come in three different forms: flags, inline notifications and banners.

Flag notifications

Flags are used for confirmations, alerts, and acknowledgments that require minimal user interaction. They are event-driven messages that appear over screen content at the top right of the screen.

Multiple flags can be shown at the same time stacking top-to-bottom. The first flag will fade first, or a flag is dismissed by users, and other visible flags 'below' move upwards to fill the gap.

Flags can close automatically (fade from view after 5 seconds, dismissable at any time), or they may require a manual close action. This close action may be a close icon in the top right corner, or a user may be required to interact with the flag before it closes.

messages flag call out example
Type:
Icon and associated color.
Title and message:
You can use bold text to combine title and message in one line, or keep them separate. Messages are restricted to two lines in length, not including actions.
Dismiss icon:
(Optional) Appears on hover for automatically closing flags, and is always visible for manual closing flags. If not present, the flag must close after an action is taken.
Actions:
(Optional) links that enable users to act on the content of the flag. Don't use more than two actions.

Placement on the page

Flag notification types

Information

3 new comments have been added.

Show comments

An information message isn't usually a response to a user action, but is incidental information that helps the user understand minor contextual or state changes.

Confirmation

Settings have been successfully saved.

Confirmations directly respond positively to user actions.

Warning

License expires in 14 days. If the license expires, access to your instance will be restricted.

A warning is used to help users avoid error situations.

Inline notifications

Inline notifications are part of the content of a user interface, and are used to alert users of a particular screen area that needs user action. These notifications can appear within a page or dialog. They are not dismissible, and only disappear once the issue has been resolved.

messages inline call out example
Type:
Icon and associated color.
Title and message:
You can use bold text to combine title and message in one line, or keep them separate. Messages are restricted to two lines in length, not including actions.
Actions:
(Optional) links that enable users to act on the content of the flag. Don't use more than two actions.

Inline notification types

Warning

A warning is used to help users avoid error situations.


This pull request can’t be merged. You will need to resolve conflicts to be able to merge.

More information

Alert

Inline alerts are used to avoid irreversible and unexpected destruction of data. Use alerts sparingly, try to avoid error situations.


There is already a pull request open between refs/heads/STASHDEV-6960-codemirror-update and refs/heads/master.

View the pull request

Banner messages

Banners appear at the very top of the screen, above the application header, and are reserved for system-level messaging about loss of data or functionality. Only one banner can appear at a time. Banners should not include a dismiss icon, and should only disappear once the related issue is resolved.

messages banner call out example
Error icon.
Title and message:
Pair information with an action, and express the severity in an appropriate manner. Follow our writing style guidelines.
Actions:
(Optional) include one clear call to action as a link. Links to documentation open in a new browser tab.