Messages

Use messages to communicate conditions, indicate an event, or to show responses to user actions. Content can include authentication, information, confirmation, warnings, and error messages. It's important to specify which of these categories the content of the message falls under so you can choose the correct icon and colors.

Flags

Flags are used for confirmations, alerts, and acknowledgments that require minimal user interaction. Show these event-driven messages by overlaying the message at the bottom left of the screen, as if it was emerging from the navigation sidebar.

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 have a flag with a normal weight message and a separate bold title, or you can combine the message and title into one line and use bold text for the whole line. Try to keep text of message concise: it can be up to two lines in length, not including action links.
Actions (optional):
A maximum of two links that allow users to respond to the flag's content.
Dismiss icon (optional):
Use this to dismiss the flag, usually without performing an action. This 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.

Multiple flags

When there are multiple flags, they stack on top of each other, with the most recent flag on top. When a user dismisses a flag by pressing 'x', the next oldest flag moves up to fill the gap.

Flag 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 might help the user understand minor context 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.

Use warnings to help users avoid error situations.

Alert

We can't delete this priority.

To delete a priority, you need to first remove it from all priority schemes.

Use alerts to help users avoid error situations.

Variations

Flags can contain a combination of a title, a message, and one or two actions.

Title and message

You have been connected

You have been added to the group “Find the Haiku on this site”.

Contains a title and message body.

Title and actions

Issue HOP-913 was created

Contains a title and one or two call to actions. Use this when you can describe the notification in a single line, and when the action labels are clear or obvious.

Title, message, & actions

Issue HOP-913 was created

The room Midnight Snack has been created.

Contains a title, message body and one or two actions.

Inline notifications

Inline notifications are part of the content of a user interface, and alert users to a specific screen area that requires their action or attention. 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:
Your notification can have a normal weight message and a separate bold title, or you can combine the message and title into one line and use bold text for the whole line. Try to keep text of message concise: it can be up to two lines in length, not including action links.
Actions:
(Optional) links that allow users to respond to the content of the flag. Don't use more than two actions.

Inline notification types

Warning

Use warnings 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

Use inline alerts to avoid irreversible and unexpected destruction of data. Use alerts sparingly, to help users 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

Information


If you can't access JIRA, fill in this form and an email will be sent to you with the details to access your account again.

Banner messages

Use banners at the top of the screen to display critical messages about loss of data, functionality, or important site-wide information that might affect the user's ability to use the product. Banners should appear one at a time, should only disappear once the related issue is resolved, and should not be dismissible. Banners appear in the screen by pushing the entire content below by animating.

messages banner call out example
Icon:
Only use the error or warning icons.
Message:
Give a short description of the severity of the issue, include the products affected, and include an action or information to help the user remedy the situation. Follow our writing style guidelines.
Actions (optional):
A link to a call to action or next steps. Any links to documentation should open in a new browser tab.

Banner types

Banners are used sparingly to signify their severity. Only use them to deliver error (red) or warning (yellow).

Error banner


messages banner error example

Warning banner


messages banner warning example