Banner

Informs users about important changes or persistent conditions. Use this component if you need to communicate to users in a prominent way. Banners are placed at the top of the page or section

Default

Use to convey general information or actions that aren’t critical.

Informational

Use to update users about a change or give them advice.

Warning

Use to display information that needs attention or that users need to take action on. Seeing these banners can be stressful for users so be cautious about using them

Success

Default to using snack bars for success messages, unless the feedback is delayed, persistent, or has a call to action.

Error

Use to communicate problems that have to be resolved immediately for users to complete a task. Seeing these banners can be stressful for users so be cautious about using them

Best practices

Banners should:

• Be used thoughtfully and sparingly for only the most important information.

• Not be used to call attention to what a user needs to do in the UI instead of making the action clear in the UI itself.

• Be dismissible unless they contain critical information or an important step users need to take to complete a task

• Use the default icon for the different types