Primitives · Application UI
Badge
A small inline label component with multiple semantic variants (default, secondary, destructive, success, warning, outline, ghost, link) built on Base UI's useRender for polymorphic rendering.
Feature showcase
Installation
Features
6 examples
Default, As Link, Inline Content, Invalid, Status, With Icon.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "success" | "warning" | "outline" | "ghost" | "link" | "default" | Visual style variant controlling color and appearance of the badge. |
| render | useRender.RenderProp<"span"> | - | Base UI render prop for polymorphic rendering, override the default span element. |
| className | string | - | Additional CSS class names merged with the variant styles. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/badge.tsx |
| Default example | content/examples/badge/default.tsx |
| As Link example | content/examples/badge/as-link.tsx |
| Inline Content example | content/examples/badge/inline-content.tsx |
| Invalid example | content/examples/badge/invalid.tsx |
| Status example | content/examples/badge/status.tsx |
| With Icon example | content/examples/badge/with-icon.tsx |