Message Bars
Message bars communicate specific information to a user. Display message bars at the top of the page or the section they apply to.
Usage
Message bars contain concise and scannable text that is directly related to an action that has been completed or is about to be performed. They may include a single message or multiple messages. They should not be used to Dismiss or Cancel. It is required to have an icon precede the message(s).
Common use cases for message bars include: success messages, updates, warnings, problems and errors.
Types
Generic
Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.
Success
Inform users when actions are successfully completed.
Warning
Display exceptions or information the user needs to act on.
Error
Communicate problems that must be addressed before a user can complete a task.
Style
Sizes and Grid
Message bars have a fixed min-height. Width may vary depending on the content. The width may vary depending on the parent container. A message bar cannot grow more than its parent container.
Width: auto when placed in a large container
Width: 100% when placed in a small container
Min-height: 32px
Corner Radius: ` 4px`
Typography
The body of the message should be contained within two lines. Be descriptive and include any troubleshooting actions.
Message: Body 10 Type 13px Regular 400, leading 19px (1.4)
Button: Body 10 Type 13px Regular 400, leading 19px (1.4)
Type-specific Style
Color
Background: Grey 20 #ededf0
Text: Grey 90 #0c0c0d
BUTTONS
Default: Blue 60 #0a84ff
Hover: Blue 70 #0060df
Pressed: Blue 80 #003eaa
Icon
Icons may provide additional clarity. Icons should be placed to the left of a title or message. These glyphs (16x16) can be found in the icons library.
Icons always have a 4px padding all around.
Type: Identity Icon Hover
Color
Background: Green 50 #30e60b
Text: Green 90 #003706
BUTTONS
Default: Green 60 #12bc00
Hover: Green 70 #058b00
Pressed: Green 80 #006504
Icon
Icons may provide additional clarity. Icons should be placed to the left of a title or message. These glyphs (16x16) can be found in the icons library.
Icons always have a 4px padding all around.
Type: Check
Color
Background: Yellow 50 #ffe900
Text: Yellow 90 #3e2800
BUTTONS
Default: Yellow 60 #d7b600
Hover: Yellow 70 #a47f00
Pressed: Yellow 80 #715100
Icon
Icons may provide additional clarity. Icons should be placed to the left of a title or message. These glyphs (16x16) can be found in the icons library.
Icons always have a 4px padding all around.
Type: Warning
Color
Background: Red 60 #d70022
Text: White #ffffff
BUTTONS
Default: Red 70 #a4000f
Hover: Red 80 #5a0002
Pressed: Red 90 #3e0200
Icon
Icons may provide additional clarity. Icons should be placed to the left of a title or message. These glyphs (16x16) can be found in the icons library.
Icons always have a 4px padding all around.
Type: Error
Behavior
Dismissible
Unless they contain critical information, message bars should be dismissible by clicking or tapping the ghost button, placed in the top right corner.
Call to Action
Add one or two micro-buttons to the message bar if users need to take an action after reading the message.
| State | Background |
|---|---|
| Default | Grey 90 a10 rgba(12, 12, 13, 0.1) |
| Hover | Grey 90 a20 rgba(12, 12, 13, 0.2) |
| Pressed | Grey 90 a30rgba(12, 12, 13, 0.3) |
| State | Background |
|---|---|
| Default | Green 60 #12bc00 |
| Hover | Green 70 #058b00 |
| Pressed | Green 80 #006504 |
| State | Background |
|---|---|
| Default | Yellow 60 #d7b600 |
| Hover | Yellow 70 #a47f00 |
| Pressed | Yellow 80 #715100 |
| State | Background |
|---|---|
| Default | Red 70 #a4000f |
| Hover | Red 80 #5a0002 |
| Pressed | Red 90 #3e0200 |
Message on Multiple Lines
It is possible for the message to wrap to multiple lines. This is especially likely on mobile, or if displayed in a small container.
In this case the icon and the dismiss-button remain aligned to the top.
The call-to-action-buttons break into a new line below the message and are aligned to the start of the message.