Badge

Variants

tone writes data-tone, and the stylesheet supplies five pairs - motion, layout, content, docs, 3d:

<Badge tone="docs">Docs</Badge>

.badge[data-tone="docs"] {
	background: var(--tone-docs);
	color: var(--tone-docs-ink);
}

These are the site's own category colours, shared with AvatarAvatarA person at glyph size: the image if it loads, initials on a toned fill if it does not.@sushindustries/ui · content, CardCardTitle, optional meta, arbitrary body. Heading level is a prop so the outline stays correct.@sushindustries/ui · layout and the nav panel - inventing a sixth tone here means inventing a colour nothing else agrees with, so a value outside the five just renders the untoned default rather than a wrong colour.

When not to use it

A badge is a label, not a control - it has no href or onClick, and wrapping one in a link changes nothing about how it looks or announces itself. For a filter chip that actually does something when clicked, reach for the pattern ArchiveArchiveA filterable grid with categories, subcategories and tags. Renders its own links through a callback so the router stays yours.@sushindustries/ui · layout uses instead: an anchor styled as a chip, not a badge wrapped inside one.