Message Bar
Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow.
Download CSS for Message BarsDirect Dependencies:
bootstrap.bundle.min.js
root.css
colors.css
typography.css
grid.css
When to use
Use the message bar to communicate confirmation, alerts, or critical information. Message bars should not rely on color alone to convey meaning (see the section on color below), as color is not a universal experience for everyone. Combining text and icons in each message bar can optimize visual understanding.
| Component | Use cases |
|---|---|
| Message Bar | Global message bars display nonmodal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task. Either can be used for critical system alerts or passive feedback. |
| Notification | A notification is a nonmodal, passive dialog that keeps users informed without blocking access to the base page. The user can continue with the experience, regardless if the notification is still on screen. Use for interactions that aren’t critical. |
Usage
Use the message bar to communicate confirmation, alerts, or critical information. Message bars should not rely on color alone to convey meaning (see the section on color below), as color is not a universal experience for everyone. Combining text and icons in each message bar can optimize visual understanding.
Standards
Message bar colors are limited to semantic colors. Designers should align usage to meaning. Remember that color is not a universal experience, and usage should not rely on color alone to convey meaning.
Use sentence case within a message bar unless referring to proper nouns. Otherwise, do not use title case and never use all caps.
Use past tense to describe the status of an action that is completed.
Because message bars convey important information and can include an inline link or action, keep the message text as concise as possible. Offer additional information or route users to action if necessary.
Include punctuation in message bars. If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark.
Do not pair timers with warnings, errors, or messages that contain actions. Timers are intended for text-only message bars.
Possible Alerts Examples
Header: .alert-heading
Links: .alert-link
Dismissible Message Bar: .alert-dismissible.fade.show
.alert.alert-primary
Message Bar Title.
This is the body of the message bar. This is a link in message bar..alert.alert-secondary
Message Bar Title.
This is the body of the message bar. This is a link in message bar.Message Bar: .alert.alert-success
Message Bar Title.
This is the body of the message bar. This is a link in message bar..alert.alert-danger
Message Bar Title.
This is the body of the message bar. This is a link in message bar..alert.alert-light
Message Bar Title.
This is the body of the message bar. This is a link in message bar..alert.alert-dark
Message Bar Title.
This is the body of the message bar. This is a link in message bar.