Badge
A small, non-interactive label built on Box, typically used for counts, statuses, or tags. Accepts an optional leading icon: any component matching TVajraIconComponent. The example below uses @devraj-labs/vajra-ui-icons, a small set of Lucide icons pre-adapted to that contract.
Basic usage
New
3
Beta
<Badge label="New" />
<Badge label="3" bg="error" />
<Badge label="Beta" bg="warning" />
With icon
Live
import { CircleIcon } from '@devraj-labs/vajra-ui-icons';
<Badge label="Live" icon={CircleIcon} bg="success" />
Props
Badge accepts all Box props (TUiBoxProps) in addition to:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Required. Badge text. | |
textProps | Omit<TTextProps, 'children'> | Extra props forwarded to the internal Text. | |
icon | TVajraIconComponent | Optional icon component rendered before the label; receives size and color. | |
iconSize | number | 12 | Size passed to the icon. |
iconColor | TVajraColors | 'textInverse' | Color passed to the icon. |
rounded | TRoundedToken | 'r-full' | Corner radius (inherited from Box). |
bg | TVajraColors | 'primary' | Background color (inherited from Box). |
px | TSpacingToken | 's-2' | Horizontal padding (inherited from Box). |
py | TSpacingToken | 's-1' | Vertical padding (inherited from Box). |