components / Status and Feedback


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.


For giving the user detailed feedback. Use the Snackbar notification for simple success messages.


For information or feedback that needs attention.


When something has gone wrong and action is required.

Close Action

In general, banners should be dismissible. Important, persistent events are the general exception.


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.

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.

More Examples