Badge

Displays a badge or label for categorization or status indication.

Installation

import { Badge } from "@gradeui/ui"

Usage

Badge

Examples

All Variants

Default

Secondary

Outline

Destructive

Success

Warning

Info

Highlight

Soft Variants

Success

Warning

Error

Info

Highlight

Outline Variants

Success

Warning

Error

Info

Fully Rounded (Pill)

Default

Online

Pending

New

With Icons

Verified

Failed

Warning

Active

Loading State

Syncing

Processing

Status with Dot

Online

Away

Offline

Category Tags

New

Beta

v2.0

In Context

Device Status:

Connected

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "highlight" \| "success" \| "warning" \| "info" \| "-soft" \| "-outline"	"default"	The visual style of the badge. Soft and outline variants available for success, warning, destructive, info, highlight.
rounded	"default" \| "full"	"default"	The border radius. Use 'full' for pill-shaped badges.
className	string	-	Additional CSS classes.

Accessibility

Badges are decorative by default
Use meaningful text content for screen readers
Don't rely solely on color to convey meaning
Consider adding aria-label for icon-only badges

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/badge.md and shipped inside the published @gradeui/ui tarball.

---
name: Badge
import: "@gradeui/ui"
variants: [default, secondary, destructive, outline, highlight, success, warning, info, success-soft, warning-soft, destructive-soft, info-soft, highlight-soft, success-outline, warning-outline, destructive-outline, info-outline]
props:
  - variant? (see list above)
  - rounded? (default | full) — "full" gives a pill shape
  - All native div HTML attrs
when_to_use: Compact status chips, counts, tags, pills. For higher-signal inline status → use Callout. For solid CTAs → Button. Soft/outline variants are quieter; solid variants are loud.
composes_with: [Card, Table (inside a cell), Avatar (next to it), anywhere inline]
aliases: [chip, tag, pill, label chip, badge, tag view, status pill, token, count badge]
---

```jsx
<Badge>New</Badge>
<Badge variant="success-soft" rounded="full">Active</Badge>
<Badge variant="destructive-outline">Blocked</Badge>
```

Avatar

Card