Variable: Badge

@arolariu/components

---

@arolariu/components / Badge

Variable: Badge

const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLDivElement>>

Defined in: components/ui/badge.tsx:98

A compact status label for surfacing metadata, categories, or state.

Remarks

Rendering Context: Server- and client-compatible presentational component.

Renders a styled <div> with pill-like spacing and variant-driven colors. Use it for small, high-signal labels such as statuses, tags, or counters.

Example

<Badge variant="secondary">New</Badge>

See

• badgeVariants — Generates matching badge classes without rendering.
• Base UI documentation