Slug
Carbon's content-summary chip. A short metadata tag shown alongside a primary entity (table row, list item, button) — typically a status count, version, or short identifier. Distinct from Tag (Tag is a categorical label) and Badge (Badge is a status pill).
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { Slug } from "@avala/design"; <Slug variant="default" size="md">Slug</Slug>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-slug--defaultOpen in Storybook →
When to use
- Short metadata next to a primary entity: row counts, version markers, short identifiers, latency / accuracy stats.
- AI-generated summaries paired with `AILabel` (
variant="ai"). - Monospace numeric / identifier presentation (tabular-nums by default).
When not to use
- Categorical labels / filters → use `Tag`.
- Status pills (success / error / warning) → use `Badge`.
- Code blocks / commands → use `CodeSnippet`.