Badge
تسمية قصيرة لحالة أو عدد أو فئة. سبعة ألوان، مملوءة أو بحد فقط، وثلاثة أحجام.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/badgeالاستخدام
import { Badge } from "@/components/ui/badge";
<Badge variant="success">مقبول</Badge>Badge تسمية قصيرة غير تفاعلية. للتسميات التي يمكن للمستخدم إزالتها أو اختيارها، استخدم Tag.
البنية
- Root: عنصر
<span>. - Icon (اختيارية): قبل النص.
- Label: النص.
أمثلة
الأحجام والشكل والأيقونات
ارتفاع sm 20px، وmd 24px (الافتراضي)، وlg 32px. يجعله rounded على شكل حبة، وهو مناسب للأعداد. ويجعله iconOnly مربعًا (أو دائرة) ويحتاج إلى aria-label.
اتجاه RTL
يتبع الحشو وموضع الأيقونة اتجاه القراءة.
إمكانية الوصول
- عنصر
<span>بلا دور. يُقرأ النص في موضعه، فضع المعنى في النص لا في اللون وحده (WCAG 1.4.1). - للعدد، أضف سياقًا:
<Badge>3<span className="sr-only"> غير مقروءة</span></Badge>. - تحتاج شارات الأيقونة فقط إلى
aria-label، أوaria-hiddenإذا كانت زخرفية.
مرجع API
Badge
وسم قصير غير تفاعلي للحالة أو العدد أو التصنيف.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"on-color" | "neutral" | "success" | "error" | "warning" | "info" | "purple" | "orange"عائلة اللون. `on-color` للشارات على الخلفيات ذات لون العلامة. | "neutral" | |
| ||
"sm" | "md" | "lg"الارتفاع: `sm` 20px، و`md` 24px، و`lg` 32px. | "md" | |
| ||
booleanبإطار فقط بدل التعبئة. | false | |
| ||
booleanزوايا مستديرة بالكامل (على شكل حبة). | false | |
| ||
booleanمربع بأيقونة فقط. يحتاج إلى `aria-label`. | false | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
--badge-neutral-background (new) | Badge neutral fill: neutral-50 as on the site; neutral-800 in dark mode. |
--badge-neutral-border (new) | Badge neutral border: neutral-200 as on the site; neutral-700 in dark mode. |
--badge-neutral-text (new) | Badge neutral label and icon: neutral-700 as on the site; neutral-200 in dark mode. |
--badge-neutral-border-outlined (new) | Badge neutral outlined border: neutral-500 as on the site; neutral-400 in dark mode. |
عرض جميع الاختلافات (33) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
92 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 16 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| neutral / filled | 9.73:1 AAA | 9.64:1 AAA |
| neutral / outlined | 9.73:1 AAA | 12.04:1 AAA |
| success / filled | 6.30:1 AA | 7.57:1 AAA |
| success / outlined | 6.31:1 AA | 10.38:1 AAA |
| error / filled | 6.04:1 AA | 7.04:1 AAA |
| error / outlined | 6.29:1 AA | 9.01:1 AAA |
| warning / filled | 5.20:1 AA | 8.57:1 AAA |
| warning / outlined | 5.19:1 AA | 11.30:1 AAA |
| info / filled | 5.57:1 AA | 7.49:1 AAA |
| info / outlined | 5.72:1 AA | 9.88:1 AAA |
| purple / filled | 9.73:1 AAA | 6.82:1 AA |
| purple / outlined | 10.04:1 AAA | 8.78:1 AAA |
| orange / filled | 5.39:1 AA | 7.50:1 AAA |
| orange / outlined | 5.52:1 AA | 9.66:1 AAA |
| on-color / filled | 6.30:1 AA | 6.30:1 AA |
| on-color / outlined | 4.74:1 AA | 4.74:1 AA |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل