نشان
برچسب کوچک برای وضعیت، دستهبندی یا شمارش.
import { Badge } from "@kashi-ui/react";
رنگها
رنگ را بر اساس معنا انتخاب کنید، نه سلیقه؛ کاربر رنگها را در کل محصول یکسان تفسیر میکند.
پیشنویسجدیدفعالدر انتظاررد شدهبتا
<Badge>پیشنویس</Badge>
<Badge tone="brand">جدید</Badge>
<Badge tone="success" dot>فعال</Badge>
<Badge tone="warning">در انتظار</Badge>
<Badge tone="error">رد شده</Badge>
<Badge tone="info">بتا</Badge><span class="k-badge">پیشنویس</span><span class="k-badge k-badge--brand">جدید</span><span class="k-badge k-badge--success"><span class="k-badge__dot" aria-hidden="true"></span>فعال</span><span class="k-badge k-badge--warning">در انتظار</span><span class="k-badge k-badge--error">رد شده</span><span 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 class="k-badge k-badge--brand k-badge--sm">کوچک</span><span class="k-badge k-badge--brand">متوسط</span><span class="k-badge k-badge--brand k-badge--lg">بزرگ</span><span class="k-badge k-badge--success k-badge--square">مربعی</span>ویژگیها
| نام | نوع | پیشفرض | توضیح |
|---|---|---|---|
tone | "neutral" | "brand" | "error" | "warning" | "success" | "info" | "neutral" | رنگ معنایی |
size | "sm" | "md" | "lg" | "md" | اندازه |
dot | boolean | false | نقطهٔ رنگی ابتدای متن |
square | boolean | false | گوشهٔ کم بهجای گرد |
متغیرهای CSS
| متغیر | پیشفرض | کاربرد |
|---|---|---|
--k-badge-radius | var(--k-radius-full) | گردی گوشهها |
--k-badge-font-weight | 500 | وزن متن |
دسترسپذیری
- همهٔ ترکیبهای رنگ متن و پسزمینه کنتراست حداقل ۴٫۵ به ۱ دارند.
- رنگ نباید تنها حامل معنا باشد؛ متن نشان باید بهتنهایی وضعیت را برساند.
- اگر عدد نشان (مثلاً تعداد پیامها) تغییر میکند، تغییر را با یک ناحیهٔ
aria-liveاعلام کنید.