Library / UI components / Badge
No. 011·noun·also called pill, tag, chip

Badge

A small rounded label or number stuck to something to flag its status or count.

SPECIMEN · LIVE DEMO
Definition

What it is

A badge is a tiny marker: a red dot with a number on an inbox icon, a "New" label beside a feature, a green "Paid" pill on an invoice. It adds status at a glance without extra words.

Use badges for counts (unread messages), statuses (Draft, Live, Overdue), and categories. Pick a small set of colors with clear meanings and stick to them.

A badge is static information attached to something. A toast is a temporary message. A button does something when clicked.

Say it like a builder

How to ask for it

Vague

“Can it show somehow which invoices are paid and which aren't?”

Precise

“Add a status badge to each invoice row: green "Paid", amber "Due", red "Overdue", grey "Draft". Badges sit right after the invoice number and use the same small pill style.”

Why it works

"Show somehow" invites a new column of text or an icon; "badge" names a compact status marker and the prompt fixes each state's color.

In the wild

You've seen this in

  • MThe red unread count on the Messages app icon
  • GStatus labels like "Open" and "Merged" on GitHub pull requests
  • AThe "Superhost" label on Airbnb
Usage note

Often confused with

ToastA toast is a temporary message; a badge stays attached as a status marker.ToggleA toggle is a control you flip; a badge just displays state.