Badge

Label ringkas untuk status, kategori, dan metadata kecil dengan tone, variant, dan size yang konsisten.

import { Badge } from "@naraya/ui";

Badge dipakai untuk informasi singkat non-interaktif seperti status order, role user, atau kategori konten.

Default

Default badge

<Badge>Default badge</Badge>

Tones

PrimarySecondaryAccentInfoSuccessWarningError

<Badge tone="success">Success</Badge>
<Badge tone="warning">Warning</Badge>
<Badge tone="error">Error</Badge>

Variants

SolidSoftOutline

<Badge variant="solid">Solid</Badge>
<Badge variant="soft">Soft</Badge>
<Badge variant="outline">Outline</Badge>

Sizes

SmallMediumLarge

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Within sentence

Plan saat ini: Pro

<Text>Plan saat ini: <Badge tone="success">Pro</Badge></Text>

Prop	Type	Default	Description
tone	`"primary" \| "secondary" \| "accent" \| "info" \| "success" \| "warning" \| "error"`	`"primary"`	Tone warna badge.
variant	`"solid" \| "soft" \| "outline"`	`"soft"`	Gaya visual badge.
size	`"sm" \| "md" \| "lg"`	`"md"`	Ukuran badge.
children	`ReactNode`	—	Konten teks/elemen badge.
...rest	`HTMLAttributes<HTMLSpanElement>`	—	Props native span.

--color-{tone}

Warna tone utama badge

--color-{tone}-content

Warna teks tone kontras

--border-subtle

Border outline variant

--radius-pill

Rounded capsule shape