Badge
Displays a badge or a component that looks like a badge.
Installation
terminal
npx felicityui add badge --platform reactUsage
example.tsx
import { Badge } from "@/components/ui/badge"
<Badge variant="secondary">Live</Badge>Default
Variants
Including ghost and link.
With icon
data-icon=inline-start | inline-end
With spinner
Same data-icon placement.
Link
render={<a />}
Custom colors
className overrides.
RTL
dir=rtl
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | secondary | destructive | outline | ghost | link | default | Visual style. |
| render | ReactElement | — | Compose as another element (e.g. anchor) while keeping badge styles. |
| className | string | — | Additional classes / custom colors. |
| badgeVariants | ({ variant?, className? }) => string | — | Exported class helper for applying badge styles without the component. |
Accessibility
WCAG 2.2 AA
- Non-interactive by default; when render is a link, use a real anchor.
- Visible focus indicator when focusable.
- Sufficient contrast on semantic token pairs.
- Do not rely on color alone for status.
Platform notes
React
Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper used sparingly, hairline borders — not Base UI / Radix runtime.
Server Componentcompatible unless marked use client.- Uses
data-slotattributes for anatomy. - Supports render prop composition (link-as-badge) without Base UI.
- Icons and Spinner use
data-icon=inline-start|inline-end for placement. - Focus-visible rings use
color.focus.ring.