رفتن به محتوای اصلی

نشان

برچسب کوچک برای وضعیت، دسته‌بندی یا شمارش.

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>

اندازه و شکل

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

ویژگی‌ها

نامنوعپیش‌فرضتوضیح
tone"neutral" | "brand" | "error" | "warning" | "success" | "info""neutral"رنگ معنایی
size"sm" | "md" | "lg""md"اندازه
dotbooleanfalseنقطهٔ رنگی ابتدای متن
squarebooleanfalseگوشهٔ کم به‌جای گرد

متغیرهای CSS

متغیرپیش‌فرضکاربرد
--k-badge-radiusvar(--k-radius-full)گردی گوشه‌ها
--k-badge-font-weight500وزن متن

دسترس‌پذیری

  • همهٔ ترکیب‌های رنگ متن و پس‌زمینه کنتراست حداقل ۴٫۵ به ۱ دارند.
  • رنگ نباید تنها حامل معنا باشد؛ متن نشان باید به‌تنهایی وضعیت را برساند.
  • اگر عدد نشان (مثلاً تعداد پیام‌ها) تغییر می‌کند، تغییر را با یک ناحیهٔ aria-live اعلام کنید.