Badge

A small, non-interactive label used to highlight status, category, count, or other short metadata. Renders as a div — not a button.

✓4 variants: default (primary), secondary, destructive, outline
✓Pill-shaped by default (rounded-full)
✓Inherits all standard HTML div attributes
✓Composable — works alongside text, buttons, and table cells

Default

Secondary

Destructive

Outline

import { Badge }from "@aetherstack/ui"

badge.tsx

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

export function BadgeDemo() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Usage

Variants

Use variant to communicate semantic meaning.

Active

Draft

Error

Pending

With status dots

Combine with a colored dot for richer status indicators.

Online

Away

Offline

In a table cell

Badges work naturally as inline elements within other components.

Name	Status
Alice Chen	Active
Bob Marsh	Inactive

Custom colors

Extend with arbitrary Tailwind classes for custom badge colors.

Info

Success

Warning

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline"	"default"	Controls the visual style of the badge.
className	string	—	Additional Tailwind classes for custom styling.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

* Required props

Accessibility

→Badge is a presentational div — it has no implicit ARIA role.
→If a badge communicates important information not conveyed elsewhere, add aria-label or visually-hidden text.
→Do not use a badge as an interactive element — for clickable labels, use Button with a badge-like class.