Message bar

A message bar communicates important information about the state of the entire product or surface—for example, the status of a page, panel, dialog, or card. The information shouldn’t require someone to take immediate action and can never be used to upsell or advertise.

Saved settings
Dialog saved successfully.
Recently viewed
FY24 Team Charter
You recently opened this
1:1 Sam • Niala recap
You recently opened this
Marketing Budget Q4
You opened this yesterday
FY24 Team Charter
You recently opened this
FY24 Team Charter
You recently opened this
FY24 Team Charter
You recently opened this
Copy me
Descriptive title  Message providing information to the user with actionable insights. Link
Descriptive title
Dialog saved successfully
Message bar
Single-line
In page
Info
Descriptive title  Message providing information to the user with actionable insights. Link
Success
Descriptive title  Message providing information to the user with actionable insights. Link
Warning
Descriptive title  Message providing information to the user with actionable insights. Link
Error
Descriptive title  Message providing information to the user with actionable insights. Link
Full width
Info
Descriptive title  Message providing information to the user with actionable insights. Link
Success
Descriptive title  Message providing information to the user with actionable insights. Link
Warning
Descriptive title  Message providing information to the user with actionable insights. Link
Error
Descriptive title  Message providing information to the user with actionable insights. Link
Multi-line
In page
Info
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Success
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Warning
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Error
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Full width
Info
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Success
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Warning
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link
Error
Descriptive title Message providing information to the user with actionable insights. Paragraphs should be less then 100 characters long or roughly 520px wide to be accessible. Link