feedback
Badge
A short label for a status or category, such as Paid or Overdue.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A badge needs the component class and one variant.
<span class="ca-badge ca-badge--neutral">Draft</span>Examples
Variants
Pick the variant by meaning, not by color. Neutral fits most labels; save danger for things that need action.
<div class="flex flex-wrap items-center gap-2">
<span class="ca-badge ca-badge--neutral">Draft</span>
<span class="ca-badge ca-badge--primary">New</span>
<span class="ca-badge ca-badge--success">Paid</span>
<span class="ca-badge ca-badge--warning">Due soon</span>
<span class="ca-badge ca-badge--danger">Overdue</span>
<span class="ca-badge ca-badge--info">Scheduled</span>
</div>In context
Place a badge next to the thing it describes, so the relation is clear without color.
Invoice 2026-114 Overdue
<p class="flex flex-wrap items-center gap-2">
Invoice 2026-114
<span class="ca-badge ca-badge--danger">Overdue</span>
</p>Guidance and accessibility
When to use
- Use a badge for a status or category that people scan, such as the state of an invoice in a table.
- Keep the label to one or two words.
- Do not use a badge as a button. If it does something, use a button.
Accessibility
- The text carries the meaning; color only supports it. “Overdue” must read as overdue in grayscale too.
- A badge is plain text for screen readers. If the status changes while the
page is open, announce the change elsewhere, for example with
role="status".
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-badge | Component | Inline label that never wraps. |
ca-badge--neutral | Variant | Plain labels such as Draft. |
ca-badge--primary | Variant | Highlights something new. |
ca-badge--success | Variant | Something finished well, such as Paid. |
ca-badge--warning | Variant | Needs attention soon, such as Due soon. |
ca-badge--danger | Variant | Needs action now, such as Overdue. |
ca-badge--info | Variant | Neutral information, such as Scheduled. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>