components / badge

Badge

Small status label with semantic colors and an optional dot.

How to use

Use `status` for the semantic color and `dot` for a decorative indicator. It is not interactive. Color must not be the only signal, so the text should state the status. For categories or filters use `Tag`.

preview

ActiveAttentionRefused

Badge.tsx

import { Badge } from "vaiperui";
 
<Badge status="success" dot>Active</Badge>
<Badge status="warning">Attention</Badge>

Statuses

preview

success

error

warning

info

neutral

pending

statuses.tsx

<Badge status="success">success</Badge>
<Badge status="error">error</Badge>
<Badge status="warning">warning</Badge>
<Badge status="info">info</Badge>
<Badge status="neutral">neutral</Badge>
<Badge status="pending">pending</Badge>

With dot

preview

success

error

warning

info

neutral

pending

dot.tsx

<Badge status="success" dot>success</Badge>
<Badge status="error" dot>error</Badge>
<Badge status="warning" dot>warning</Badge>
<Badge status="info" dot>info</Badge>
<Badge status="neutral" dot>neutral</Badge>
<Badge status="pending" dot>pending</Badge>

Sizes

preview

sizes.tsx

<Badge size="sm">sm</Badge>
<Badge size="md">md</Badge>
<Badge size="lg">lg</Badge>

Custom color

preview

Orange

Violet

custom-color.tsx

<Badge customColor="#ff6600" />
<Badge customColor={{ light: "#a855f7", dark: "#fde047" }} />

Props

Prop	Values	Default	Description
status	success \| error \| warning \| info \| neutral \| pending	neutral	Semantic color
dot	boolean	false	Decorative dot before the text
size	sm \| md \| lg	md	Size of the element and its text
radius	none \| sm \| md \| lg \| full	full	Corner rounding
customColor	string \| { light, dark }	none	Any CSS color (or a pair per theme) for the badge (overrides status)
(native)	span	none	Every native prop of the element, className, ref, etc.