Badge

Labels a status or a category with one or two words.

Code

import { Badge } from "@/components/ui/badge"

<Badge variant="success">✓ Paid</Badge>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-row' },
    h(P.Badge, null, 'New'),
    h(P.Badge, { variant: 'secondary' }, 'Draft'),
    h(P.Badge, { variant: 'outline' }, 'v2.4.0'),
    h(P.Badge, { variant: 'success' }, '✓ Paid'),
    h(P.Badge, { variant: 'warning' }, '! Pending'),
    h(P.Badge, { variant: 'destructive' }, '× Declined')));

Usage

What you provide

children: one or two words. For status, start with an icon or symbol (✓, !, ×) so color is never the only signal.
variant: default | secondary | outline | ghost | link | destructive | success | warning.

Usage

Record status in tables: success (paid, active), warning (pending), destructive (declined, error), secondary (draft, inactive).
Versions, tags and counts: outline.
Don't use a Badge as a button. If it is clickable, use Button size="sm" variant="outline".

Accessibility

A badge is static text: it takes no focus and needs no interaction.
Status never relies on color alone: start the label with a symbol or word ("✓ Paid", "! Pending").
When a status changes while the person is on the page, announce it in a role="status" region, not by re-rendering the badge alone.

Adapted from Magoo 1.6.0 by Marcelo Sales: Alerts (alertas). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add badge

<Badge>
  <Icon />
  Text
</Badge>

Badge

Name	Type	Default
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "link" \| "destructive" \| "success" \| "warning"`	`"default"`
Visual style. Status variants always pair color with a word or symbol.
`asChild`	`boolean`	`false`
Renders its child (e.g. a link) with the badge style.
`children`Required	`ReactNode`	—
The label.