Badge
A status, count or category in one or two words, next to a title or in a table row. It is text only; for something people click or remove, use a Chip.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the server.
import { Badge } from "@camaleo/react";Anatomy
A <span> with the label and, if you ask for it, a small dot before it. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Variants
The soft fill is the everyday choice. Save the solid one for the badge that must stand out on the screen, and use the outline when many badges sit together.
Tones
Pick the tone by meaning: grey for neutral, blue for information, green when it went well, yellow when it needs attention soon, red when something failed.
Status dot
The dot makes a live state, like online or in a meeting, easy to spot in a list. The word next to it is what carries the meaning.
With an icon
An icon helps people scan, but the word must say it all. Mark the icon aria-hidden so it isn't read twice.
Count with context
A screen reader that hears "Inbox 3" doesn't know three of what. Add "unread" as hidden text inside the badge.
Long labels
Labels typed by users can get long. Cap the width and cut the text with an ellipsis; the full name stays in the page for screen readers and in title for the mouse.
| Order | Customer | Status |
|---|---|---|
| #4092 | Ana Silva | Delivered |
| #4093 | Rafael Souza | Shipped |
| #4094 | Juliana Costa | Late |
In a table
One badge per row, in its own column, lets people compare statuses down the table at a glance.
Counts on filters
Click a filter. The badge only shows the count; the Toggle around it is what people press, and it announces whether it is on.
In context
Badges sit next to what they describe. These are whole pieces of UI you can copy, in the skin you picked.
Beatriz Miranda
Engineering lead
Order #4092
Ana Silva
Date picker shows the wrong month after a time zone change
Guidelines
"Payment settled" is clear to everyone, with or without the color.
"Status 200" means something to the developer, not to the customer reading it.
A short badge reads in a glance and fits on a phone.
Long text gets cut off or breaks the layout. Put explanations in the text, or in an Alert.
Props
soft for everyday use, solid to stand out, outline when many badges sit together.Badge renders a <span> and takes its attributes, like className, style and title.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the badge itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- Color is never the only signal: the label says the status, so people who don't see the color still get it.
- A bare number needs context. Add what it counts as hidden text ("3 unread"), or say it in the label of the control around it.
- A badge that changes while people look at the page is not announced. When the change matters, say it in a status message (role="status").
- For tags people select or remove, use Chip: it is a real button, with focus and a name.