Data display
Badge
A small status or category label.
Server safeSource
Import
import { Badge } from '@the_viveksingh/vivek-ui'Tones and variants
PrimaryLiveBetaDeprecatedNeutral
<Badge tone="primary">Primary</Badge>
<Badge tone="success" variant="solid">Live</Badge>
<Badge tone="warning" variant="outline">Beta</Badge>
<Badge tone="danger" pill>Deprecated</Badge>Props
Generated from the package's own type declarations, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'soft' | 'outline' | — | — |
tone | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | — | — |
size | 'sm' | 'md' | — | — |
pill | boolean | — | Pill-shaped instead of rounded-rectangle. |
Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.
Rendering
Server safe
Badge carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.