ui/components/badge

Badge

Inline status label with semantic color variants.

Preview

tsx

1 import { Badge } from "@/components/ui/badge";2 3 export default function BadgeDefault() {4   return <Badge>DEFAULT</Badge>;5 }6

Installation

$pnpm exec dgadd add ui/badge

[Installs to]src/components/ui/badge[Item]ui/badge

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Badge } from "@/components/ui/badge";2 3 export default function BadgeDefault() {4   return <Badge>DEFAULT</Badge>;5 }6

Examples

Variants

Preview

tsx

1 import { Badge } from "@/components/ui/badge";2 3 export default function BadgeVariants() {4   return (5     <div className="flex flex-col gap-3">6       <div className="text-xs font-bold text-muted-foreground uppercase">Solid</div>7       <div className="flex flex-wrap gap-3">8         <Badge variant="success">SUCCESS</Badge>9         <Badge variant="warning">WARNING</Badge>10         <Badge variant="error">ERROR</Badge>11         <Badge variant="info">INFO</Badge>12         <Badge variant="neutral">NEUTRAL</Badge>13       </div>14 15       <div className="mt-2 text-xs font-bold text-muted-foreground uppercase">With Dot</div>16       <div className="flex flex-wrap gap-3">17         <Badge variant="success" dot>18           SUCCESS19         </Badge>20         <Badge variant="warning" dot>21           WARNING22         </Badge>23         <Badge variant="error" dot>24           ERROR25         </Badge>26         <Badge variant="info" dot>27           INFO28         </Badge>29         <Badge variant="neutral" dot>30           NEUTRAL31         </Badge>32       </div>33     </div>34   );35 }36

Sizes

Preview

tsx

1 import { Badge } from "@/components/ui/badge";2 3 export default function BadgeSizes() {4   return (5     <div className="flex flex-wrap items-center gap-3">6       <Badge size="xs">XS</Badge>7       <Badge size="sm">SM</Badge>8       <Badge size="md">MD</Badge>9       <Badge size="lg">LG</Badge>10     </div>11   );12 }13

Outline

Preview

tsx

1 import { Badge } from "@/components/ui/badge";2 3 export default function BadgeOutline() {4   return (5     <div className="flex flex-wrap items-center gap-3">6       <Badge appearance="outline" variant="success">7         SUCCESS8       </Badge>9       <Badge appearance="outline" variant="warning">10         WARNING11       </Badge>12       <Badge appearance="outline" variant="error">13         ERROR14       </Badge>15       <Badge appearance="outline" variant="info" dot>16         INFO17       </Badge>18       <Badge appearance="outline" size="xs">19         BETA20       </Badge>21     </div>22   );23 }24

API Reference

Badge

Name	Type	Default	Description
variant	"success" \| "warning" \| "error" \| "info" \| "neutral"	"neutral"	Semantic color token. Picks foreground, background, border, and dot color together.
size	"xs" \| "sm" \| "md" \| "lg"	"sm"	Padding and font-size token.
appearance	"solid" \| "outline"	"solid"	Solid keeps the tinted fill; outline renders border and text only on a transparent background.
dot	boolean	false	Renders a leading status dot in the variant color.
children	ReactNode	—	Badge label.

Accessibility

Notes

Uppercase Label

Badge renders its label uppercase with wide tracking — the terminal label voice used across the library. Pass mixed-case copy; the transform is presentational, so assistive tech still reads the original text.

Dot Prop

Set dot={true} to render a colored status indicator before the label content.

Outline Appearance

appearance="outline" drops the tinted fill and keeps the variant border and text color — for badges sitting on an already-tinted row or card.

Variant Colors Across Themes

Variants read theme tone tokens, so every tone carries the same hue family in both themes — success green, info blue, warning amber, error red — at the lightness each background needs. Override the --base-* primitives to retone them; the variant vocabulary stays the same.

Dynamic Content

For badges with content that updates (e.g., unread counts), add role="status" to the Badge for screen reader announcements. Static badges (labels like "Beta" or "New") need no additional ARIA.

Source

Install via CLI: pnpm exec dgadd add ui/badge.

Highlighted source loads after this disclosure opens. Browse the source repository.

Badge

Installation

Usage

Examples

Variants

Sizes

Outline

API Reference

Badge

Accessibility

Notes

Uppercase Label

Dot Prop

Outline Appearance

Variant Colors Across Themes

Dynamic Content

Source

View component source (6 files)