Badge
A short label beside other content, for a status, a count or a category, in six variants.
A badge is a short label that qualifies what is next to it: "On", "Overdue", "12 new", a category.
It is not a button. For the status of a record with a fixed set of tones (success, warning,
danger), the composed Status maps a status to its tone.
// apps/docs/examples/ui/badge.tsx'use client';
import {BadgeCheckIcon, ExternalLinkIcon} from 'lucide-react';
import {Badge} from '@workspace/active-ui/components/primitives/badge';
/** * A short label beside other content: a status, a count, a category. Six * variants, an icon beside the text, and a badge that is a link. */export default function BadgeExample() { return ( <div className="flex flex-col items-center gap-4"> <div className="flex flex-wrap justify-center gap-2"> <Badge>Default</Badge> <Badge variant="secondary">Secondary</Badge> <Badge variant="outline">Outline</Badge> <Badge variant="destructive">Overdue</Badge> <Badge variant="ghost">Ghost</Badge> <Badge variant="link">Link style</Badge> </div> <div className="flex flex-wrap justify-center gap-2"> <Badge variant="secondary"> <BadgeCheckIcon data-icon="inline-start" aria-hidden /> Verified </Badge> <Badge variant="outline" className="tabular-nums"> 12 new </Badge> <Badge variant="outline" render={<a href="#badge-api" />}> API reference <ExternalLinkIcon data-icon="inline-end" aria-hidden /> </Badge> </div> </div> );}Usage#
import {Badge} from '@workspace/active-ui/components/primitives/badge';
<Badge variant="secondary">Verified</Badge>;Variants#
default: the primary colour, for the one label that must stand out;secondaryandoutline: quieter labels;destructive: a problem, in the danger tone (the text reaches AA on its tinted fill);ghost: no fill until hovered, for a label inside a dense row;link: looks like a link.
An icon beside the text takes data- or "inline-, as on a
button. render makes the badge another element, such as a link;
then it gets a hover state. badge returns the classes for an element of your
own.
What your application provides#
The text, short: one or two words, or a number.
Meaning beyond colour: a badge's colour supports its text and is never the only signal.
Accessibility#
A badge is a <span> read as part of the surrounding text. A number alone ("12") may need context:
write "12 new" or give the surrounding element a name that includes it.
API#
Import from @workspace/
Props marked Base UI are behaviour of the Base UI part this component is built on.
Props
- Type
"default""destructive""ghost""link""outline""secondary"null- Default
'default'
The emphasis: default (the primary colour), secondary, outline, destructive (a problem, in the danger tone), ghost and link.
- Type
ComponentRender Fn<HTMLProps, {}> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other exports#
Functions, hooks and constants
(props?: (ConfigVariants<{ variant: { default: string; secondary: string; destructive: string; outline: string; ghost: string; link: string; }; }> & ClassProp) | undefined) => stringThis page adapts the Badge documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.