Badge
A small label for statuses, categories and filter tags — 6 colors, 3 variants and a remove button.
QoralamaYangiTo'langanKutilmoqdaBekor qilindiYo'lda
'use client';
import { Badge } from '@akhatmirzo/ui';
export default function BadgeColors() {
return (
<div className="flex flex-wrap items-center gap-2">
<Badge>Qoralama</Badge>
<Badge color="primary">Yangi</Badge>
<Badge color="success">To'langan</Badge>
<Badge color="warning">Kutilmoqda</Badge>
<Badge color="danger">Bekor qilindi</Badge>
<Badge color="info">Yo'lda</Badge>
</div>
);
}
Import
import { Badge } from '@akhatmirzo/ui';When to use
- To show a status — "Paid", "Pending", "Cancelled". Match the color to the meaning:
successfor done,warningfor waiting,dangerfor errors or cancellations. - Don't rely on color alone. The text should state the status by itself, so it reads right for people who can't tell the colors apart.
- For filter tags —
onRemoveadds a ✕ button. - It isn't clickable. A badge is a label; use a
Buttonfor actions. - Keep it short — one or two words. Long text gets truncated.
Colors
color: neutral (default), primary, success, warning, danger and info. Colors come
from the tokens, so contrast holds in dark mode too.
Variants
variant: soft (default) has a light background, solid a strong one that draws more
attention, and outline a border with colored text.
SoftSolidOutline
SoftSolidOutline
'use client';
import { Badge } from '@akhatmirzo/ui';
export default function BadgeVariants() {
return (
<div className="flex flex-col gap-3">
<div className="flex flex-wrap items-center gap-2">
<Badge variant="soft" color="success">
Soft
</Badge>
<Badge variant="solid" color="success">
Solid
</Badge>
<Badge variant="outline" color="success">
Outline
</Badge>
</div>
<div className="flex flex-wrap items-center gap-2">
<Badge variant="soft" color="danger">
Soft
</Badge>
<Badge variant="solid" color="danger">
Solid
</Badge>
<Badge variant="outline" color="danger">
Outline
</Badge>
</div>
</div>
);
}
Sizes
sm is compact, for table rows; md is the default.
KichikO'rta
'use client';
import { Badge } from '@akhatmirzo/ui';
export default function BadgeSizes() {
return (
<div className="flex flex-wrap items-center gap-2">
<Badge size="sm" color="primary">
Kichik
</Badge>
<Badge size="md" color="primary">
O'rta
</Badge>
</div>
);
}
Dot
dot adds a colored dot on the left — handy for live states like "Online" or "Active".
OnlaynTekshirilmoqdaTo'xtatilgan
'use client';
import { Badge } from '@akhatmirzo/ui';
export default function BadgeDot() {
return (
<div className="flex flex-wrap items-center gap-2">
<Badge dot color="success">
Onlayn
</Badge>
<Badge dot color="warning" variant="outline">
Tekshirilmoqda
</Badge>
<Badge dot color="danger" variant="solid">
To'xtatilgan
</Badge>
</div>
);
}
Removing
When onRemove is set, a ✕ button appears. Make its aria-label specific with labels.remove —
"Remove Toshkent filter" is clearer than just "Remove".
ToshkentSamarqandBuxoroFarg'ona
'use client';
import { Badge, Button } from '@akhatmirzo/ui';
import { useState } from 'react';
const initial = ['Toshkent', 'Samarqand', 'Buxoro', "Farg'ona"];
export default function BadgeRemovable() {
const [cities, setCities] = useState(initial);
return (
<div className="flex flex-wrap items-center gap-2">
{cities.map((city) => (
<Badge
key={city}
variant="outline"
onRemove={() => setCities((list) => list.filter((c) => c !== city))}
labels={{ remove: `${city} filtrini olib tashlash` }}
>
{city}
</Badge>
))}
{cities.length < initial.length && (
<Button variant="link" size="sm" onClick={() => setCities(initial)}>
Qaytarish
</Button>
)}
</div>
);
}
Props
Badge accepts every other <span> attribute except color, which is taken by the color
variant.
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Color (meaning) |
variant | 'soft' | 'solid' | 'outline' | 'soft' | Look |
size | 'sm' | 'md' | 'md' | Size |
dot | boolean | false | Colored dot on the left |
onRemove | (event: MouseEvent<HTMLButtonElement>) => void | — | When set, shows the ✕ button |
labels | { remove?: string } | { remove: 'Olib tashlash' } | aria-label for the ✕ button |
Data attributes
On the root element: data-variant, data-color and data-size. badgeVariants is also
exported if you need the styles on another element.
Accessibility
- Plain text — a
<span>whose content screen readers read as is. The dot isaria-hidden. - The ✕ button is a real
<button>: focus it withTab, press it withEnter/Space. It looks 16px but has a larger hit area. - After a tag is removed, move focus yourself — to the next tag or the search field — so it doesn't get lost.