Skip to content
Index730 resources
Banner

Banner

30 resources in the index ship this component, best first. Group: Feedback.

Also called · alert banner · global banner · page-level alert · system banner · full-width alert · notice bar

Before you ship

6
  1. 01Style — How the banner types look (fill, text colour, border radius etc)
  2. 02Content — A title is a must but you can consider a description if you feel a title does not convey enough information
  3. 03Types — Banners typically appear as 5 options: information, success, warning, error, neutral. This helps visually establish context and level of importance
  4. 04Call to action button — A banner may call for the user to do something, like fix the error it is calling out, or viewing the successful outcome of an event
  5. 05Placement — Where the banner sits on the page, dependent on context and importance
  6. 06Dismissable — Whether the banner can be dismissed. Positive/neutral banners (info and success) would suit this, but not warning/error banners as they are too critical

Checks from checklist.design, MIT.

Ships it

30