- style
Message Bar
- Hasitha Jayarathne
- Carlie Bradshaw
Related Pages:
- 1 Description
- 2 Types
- 3 Usage & Behavior
- 3.1 General guidelines
- 3.1.1 Structure
- 3.1.2 Placement and Positioning
- 3.2 Interaction
- 3.3 Best Practices
- 3.1 General guidelines
- 4 Accessibility Compliance
- 5 Design
- 6 Code
Description
Message bars are non-modal messages informing users of updates or changes to system status.
Types
Type | Image |
|---|---|
Info |  |
Warning |
Usage & Behavior
General guidelines
Message bars are triggered only by a system event.
They are usually fixed on the screen. In some cases the user may be able to close them.
Structure
Message bars consist of:
a status icon on the left side, indicating the type of message.
message text, across a maximum of 2 lines. Longer messages will be truncated, with the full text shown in a Tooltip on hover.
a link, e.g. Learn more (optional).
a Close icon button (optional).
Placement and Positioning
Message bars are placed at the top of the relevant container, and fill its entire width.
Interaction
Clicking the Close button (x) removes the message bar with a short fade effect. After closing the message bar the content below will move up into the available space.
Best Practices
Use:
to display system-generated messages and warnings.
to show a message while keeping the rest of the page interactive.
Don’t use:
for messages triggered by user actions → use a Toast message or Message popups.
General
Keep the message text short and informative.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
Code