نشان

<Badge>پیش‌نویس</Badge>
<Badge tone="brand">جدید</Badge>
<Badge tone="success" dot>فعال</Badge>
<Badge tone="warning">در انتظار</Badge>
<Badge tone="error">رد شده</Badge>
<Badge tone="info">بتا</Badge>

<span data-tone="neutral" data-variant="soft" class="k-badge">پیش‌نویس</span><span data-tone="brand" data-variant="soft" class="k-badge k-badge--brand">جدید</span><span data-tone="success" data-variant="soft" class="k-badge k-badge--success"><span class="k-badge__dot" aria-hidden="true"></span>فعال</span><span data-tone="warning" data-variant="soft" class="k-badge k-badge--warning">در انتظار</span><span data-tone="error" data-variant="soft" class="k-badge k-badge--error">رد شده</span><span data-tone="info" data-variant="soft" class="k-badge k-badge--info">بتا</span>

<Badge tone="brand" size="sm">کوچک</Badge>
<Badge tone="brand">متوسط</Badge>
<Badge tone="brand" size="lg">بزرگ</Badge>
<Badge tone="success" square>مربعی</Badge>

<span data-tone="brand" data-variant="soft" class="k-badge k-badge--brand k-badge--sm">کوچک</span><span data-tone="brand" data-variant="soft" class="k-badge k-badge--brand">متوسط</span><span data-tone="brand" data-variant="soft" class="k-badge k-badge--brand k-badge--lg">بزرگ</span><span data-tone="success" data-variant="soft" class="k-badge k-badge--success k-badge--square">مربعی</span>

<Badge tone="success" variant="solid">پرداخت‌شده</Badge>
<Badge tone="brand" variant="outline">بتا</Badge>
<Badge variant="outline" icon={<UserIcon />}>۱۲ عضو</Badge>

// فیلترهای فعال
{tags.map((t) => <Badge key={t} tone="brand" onRemove={() => remove(t)}>{t}</Badge>)}