Studiov0.6.0

Badge

Tier 1 — shadcn
Data Display

A compact label for status, category, or count annotations on other elements.

Live Preview

Active
Draft
Review
Blocked

Code

import { Badge } from "@regen/ui";

<Badge />

Variants

Default
Active
Secondary
Secondary
Outline
Outline
Destructive
Error

Props Inspector

default

Documentation

Use Cases

  • •Status indicators
  • •Category tags
  • •Notification counts

Do

  • ✓Keep text under 2 words
  • ✓Use color variants consistently (destructive=error, secondary=neutral)

Don't

  • ✗Don't use for primary actions — use Button
  • ✗Don't use more than 3 badges in a group