Badge
Badge labels the status or category of the thing next to it. It renders a span by default and forwards a ref to the underlying element; use the render prop when the badge belongs in a different element, such as a link. Its color carries meaning, so keep the label itself self-describing for anyone who can't see it.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| color | 'primary' | 'neutral' | 'warning' | 'negative' | 'positive' | 'primary' | |
| render | (props) => ReactNode | — | — |
| className | string | — | — |
| style | CSSProperties | — | — |
Usage
import { Badge } from '@clerk/ui/mosaic/components/badge';
<Badge
color='primary'
>
Badge Label
</Badge>Examples
Colors
PrimaryNeutralWarningNegativePositive
With an icon
Verified