How they help
Located in a prominent section of the screen, they guarantee that users are promptly notified about updates or actions. They provide feedback and keep users informed about what's happening with the application or website.
Example of a message bar
Anatomy
- Container: holds interchangeable content
- Icon: visual to help give clarity to user
- Title label: clear and concise text describing status
- Description label: optional text giving additional insight
- Link❖: optional subtle action for user to take another step
- Secondary button❖: optional bold action for user to take another step
- Dismiss icon: interactive element that allows user to close the message bar
Visual reference for anatomy
Variants
There are 5 variants of the component: description, multi-line description, link, action buttons, dismiss button.
- Description: add this for additional context for the user.
- Multi-line description: on default, the message bar will be a single line, but you have the ability to add more text if needed. Paragraphs should be less than 100 characters long to be accessible.
- Link: to add a subtle action for users to take, use a link.
- Dismiss button: to allow users to remove the message bar from their screen, add a dismiss button.
- Action buttons: to add extra call-to-actions, add buttons (two is the maximum).
Designer resources