Badges and Banners
The rider app shows "Payout delayed" as a tiny red pill in a corner of the earnings screen, and most riders never notice it. Meanwhile the customer app announces "New dishes!" in a full-width banner at the top of every screen, and customers have learned to ignore banners altogether. Both messages were the wrong size for what they had to say.
The rule
A badge labels one thing; a banner tells the whole page something.
A badge is a small, compact label attached to one element. It describes that element's status or category, or shows a count:
- "Veg" and "Bestseller" on a dish
- "Out for delivery" on an order
- "3" on the cart icon
Badges are short (a word, two at most, or a number) and usually not clickable. When a badge shows status, it uses the functional colours, and it always includes text or an icon so colour is never the only signal.
A banner is a prominent message across the top of a page or section. It is about something that affects the whole view, or the whole account, and it stays until the problem is solved or the reader dismisses it:
- "Heavy rain in your area. Deliveries may take longer."
- "Your bank details are incomplete, so payouts are on hold." with an action, "Add bank account"
Banners come in severity levels, each mapped to functional colour tokens and an icon: information (blue), success (green), warning (amber) and error (red). Reserve banners for messages that genuinely matter. If every screen carries one, readers stop seeing any of them.
A third relative is worth naming so you don't confuse it: a toast is a brief message that appears and disappears by itself, such as "Added to cart". It confirms something that just happened.
The shortcut
The scope of the message sets the size of the component. About one item: badge. About the whole page or account, and it needs attention until handled: banner. A quick confirmation of something just done: toast.
"Pure veg" on a restaurant card
About one item, a label. Badge.
Drills
Answer fast — trust the rule.
A dish is a bestseller. Which component should show that?
A partner restaurant's account is suspended and they must upload a licence. What fits?
Which banner severity fits "Deliveries may be slower because of heavy rain"?
The cart badge shows "3" in a red circle. Is colour alone carrying the meaning?
Remember
- A badge labels one thing; a banner tells the whole page or account something; a toast confirms what just happened.
- Shortcut: the scope of the message sets the size of the component.
- Trap: banners everywhere, which teaches readers to ignore them, and critical news hidden in a tiny badge.