Banner shows a persistent message at the top of a page or section. Use it for form errors, system updates, maintenance notices, or success confirmations that the user needs to see until they act on it.
ts
| Guidance | Practices |
|---|---|
| Do | Pick a status that matches the message: info for updates, warning for caution, error for problems, success for confirmations. |
| Do | Use the card container inside page content and the section container for full-width messages that span the entire page. |
| Do | Make info and success banners dismissable. Keep error banners visible until the user fixes the issue. |
| Do | Keep titles short and scannable: "Payment failed" not "There was a problem processing your most recent payment." |
| Don't | Use Banner for short-lived messages that disappear on their own; use Toast instead. |
| Don't | Stack multiple banners with the same status; combine related messages into one banner. |
Combine an action button, dismiss control, and expandable detail area in one banner. Use for complex notifications like config changes or deployment summaries.
Let the user close a banner after reading it. Use for maintenance notices, feature tips, or any non-critical message the user can acknowledge.
A full-width banner with no border radius for page-level notifications. Use at the top of a page for site-wide announcements or maintenance alerts.
All 4 banner statuses: info, success, warning, and error. Use to show persistent messages like updates, confirmations, cautions, or problems at the top of a page or section.
Add a button to a banner so the user can act on the message. Use for trial expirations, payment failures, or anything that needs a response.