Banner notifications inform users about changes or conditions on a page.
Status Variations
Banner have 4 possible statuses: info (default), success, warning, and critical. An optional icon can also be affixed for each status.
Info (Default)
Use for general, non-critical information.
<Banner
icon
title="You are viewing an Inactive Item."
/>
Success
For giving the user detailed feedback. Use the Snackbar notification for simple success messages.
<Banner
status="success"
icon
title="Report sent."
onPrimaryActionClick={()=>{}}
primaryActionName="View Report"
onSecondaryActionClick={()=>{}}
secondaryActionName="New Report"
>
Your report 'S1234' was sent over to Jane Doe.
</Banner>
Warning
For information or feedback that needs attention.
<Banner
status="warning"
icon
title="This report is too large to send."
/>
Critical
When something has gone wrong and action is required.
<Banner
status="critical"
icon
title="Incorrect password."
/>
Close Action
In general, banners should be dismissible. Important, persistent events are the general exception.
<Banner
onClose={()=>{}}
title="You are closing a banner."
/>
Buttons
1 or 2 actions can be added to each banner. When there is no body text, buttons will appear on the right, otherwise they go below the body text. The button styling cannot be changed.
<Stackdirection="column"spacing="3">
<Banner
onPrimaryActionClick={()=>{}}
primaryActionName="Activate Item"
title="You are viewing an inactive item."
/>
<Banner
onPrimaryActionClick={()=>{}}
primaryActionName="Activate Item"
onSecondaryActionClick={()=>{}}
secondaryActionName="Manage Items"
title="You are viewing an inactive item."
/>
<Banner
onPrimaryActionClick={()=>{}}
primaryActionName="Activate Item"
onSecondaryActionClick={()=>{}}
secondaryActionName="Manage Items"
title="You are viewing in inactive item."
>
Changes cannot be made until you activate the item.
</Banner>
</Stack>
Body Text
In addition to a message title, optional copy can be provided. Copy should be inside <p>, <ol>, or <ul> HTML tags if doing more than a single line. Buttons are not added in this area.
<Stackdirection="column"spacing="3">
<Bannertitle="Select a table">
<p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p>
</Banner>
<Bannertitle="Select a table">
<ul>
<li>Street address is missing.</li>
<li>Postal code is missing.</li>
<li>Phone number is missing.</li>
</ul>
<p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p>
</Banner>
<Banner
status="critical"
title="Unable to process your request"
>
<p>More information is needed in order to process your request.</p>
<ul>
<li>Street address is missing.</li>
<li>Postal code is missing.</li>
<li>Phone number is missing.</li>
</ul>
</Banner>
</Stack>
More Examples
<Banner
icon
onClose={()=>{}}
onPrimaryActionClick={()=>{}}
primaryActionName="Do Everything"
onSecondaryActionClick={()=>{}}
secondaryActionName="Do Nothing"
title="Message sent."
>
This is a pretty big notification for something of some significance.
</Banner>
<Banner
status="success"
icon
onClose={()=>{}}
onPrimaryActionClick={()=>{}}
primaryActionName="Hello"
secondaryActionName="Goodbye"
onSecondaryActionClick={()=>{}}
title="Message sent."
/>
<Banner
status="warning"
icon
onClose={()=>{}}
title="Message sent."
onPrimaryActionClick={()=>{}}
primaryActionName="Settings Page"
>
This is a pretty big notification for something of some significance.
</Banner>
<Stackdirection="column"spacing="3">
<Bannertitle="Something in a confined area also works for the banner."/>
<Banner
status="critical"
icon
onClose={()=>{}}
title="Message sent."
onPrimaryActionClick={()=>{}}
primaryActionName="Retry"
>
<p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p>
<p>Here are some other things you’re being warned about.</p>
<ul>
<li>Hey look, it’s a list item.</li>
<li>Another warning about something.</li>
<li>Always choose C</li>
<li>One more for the fans.</li>
</ul>
</Banner>
</Stack>
Best Practices
Avoid having the line length of the banner exceeding 100 characters.
Banners should be placed close to their context.
Be concise and scannable with messages.
Don't use on a regular basis to display primary information or actions.
Use warning and critical statuses sparingly.
Related Components
To require a user interaction isolated from the page content, use a Modal component.
For critical information that requires a specific decision, use a Dialog component.
For non-intrusive notifications:
Site-wide information about an event, use the Announcement notification.
Quick, successful information, use the Snackbar notification.
Persistent, detailed feedback, use the Toast notification.
