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

generic message bar example

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

success message bar example

Inform users when actions are successfully completed.

Warning

warning message bar example

Display exceptions or information the user needs to act on.

Error

error message bar example

Communicate problems that must be addressed before a user can complete a task.

Style

Sizes and Grid

pairing example

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

pairing example

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

pairing example

Background: Grey 20 #ededf0

Text: Grey 90 #0c0c0d

BUTTONS

Default: Blue 60 #0a84ff

Hover: Blue 70 #0060df

Pressed: Blue 80 #003eaa

Icon

pairing example

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

pairing example

Background: Green 50 #30e60b

Text: Green 90 #003706

BUTTONS

Default: Green 60 #12bc00

Hover: Green 70 #058b00

Pressed: Green 80 #006504

Icon

pairing example

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

pairing example

Background: Yellow 50 #ffe900

Text: Yellow 90 #3e2800

BUTTONS

Default: Yellow 60 #d7b600

Hover: Yellow 70 #a47f00

Pressed: Yellow 80 #715100

Icon

pairing example

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

pairing example

Background: Red 60 #d70022

Text: White #ffffff

BUTTONS

Default: Red 70 #a4000f

Hover: Red 80 #5a0002

Pressed: Red 90 #3e0200

Icon

pairing example

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

Dismissable behavior

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

message bar in action

Add one or two micro-buttons to the message bar if users need to take an action after reading the message.

pairing example

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)

pairing example

State Background
Default Green 60 #12bc00
Hover Green 70 #058b00
Pressed Green 80 #006504

pairing example

State Background
Default Yellow 60 #d7b600
Hover Yellow 70 #a47f00
Pressed Yellow 80 #715100

pairing example

State Background
Default Red 70 #a4000f
Hover Red 80 #5a0002
Pressed Red 90 #3e0200

Message on Multiple Lines

message bar in action

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.