nili/ui
enfaartr
كل المكوّنات

Badge

عرض شامل
١٥ تصدير٦ محور تنويع١٧ خاصيّة٥ ملف
import { Badge, StatusBadge } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

المظاهر

أربع معالجات. اسمها appearance لا style — فـstyle خاصية React نفسها، وأخذها يجعل النمط المضمّن مستحيلًا.

filledlightlighterstroke
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge appearance="filled">Filled</Badge>
      <Badge appearance="light">Light</Badge>
      <Badge appearance="lighter">Lighter</Badge>
      <Badge appearance="stroke">Stroke</Badge>
    </>
  )
}

الألوان

عشرة ألوان تُدمج بحرّية مع أي مظهر. اللون زينة — ضع المعنى في النص.

filled
grayblueorangeredgreenyellowpurpleskypinkteal
light
grayblueorangeredgreenyellowpurpleskypinkteal
lighter
grayblueorangeredgreenyellowpurpleskypinkteal
stroke
grayblueorangeredgreenyellowpurpleskypinkteal
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge color="gray">Gray</Badge>
      <Badge color="blue">Blue</Badge>
      <Badge color="green">Green</Badge>
      <Badge color="red">Red</Badge>
    </>
  )
}

الأحجام

medium (‏20 بكسل) وsmall (‏16 بكسل).

MediumSmallMediumSmall
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge size="medium">Medium</Badge>
      <Badge size="small">Small</Badge>
    </>
  )
}

النقطة والأيقونات والأرقام

dot يرسم نقطة في المقدّمة؛ ويقبل startIcon وendIcon أي عنصر. والرقم المجرّد هو children فقط — لا توجد خاصية منفصلة للعدّ.

نشطجديد12%2معطّل
import { Badge, Icon } from "@nili/ui"
import { RiSparkling2Line, RiArrowUpLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Badge color="green" appearance="light" dot>
        Active
      </Badge>
      <Badge color="purple" startIcon={<Icon icon={RiSparkling2Line} />}>
        New
      </Badge>
      <Badge color="green" endIcon={<Icon icon={RiArrowUpLine} />}>
        12%
      </Badge>
      <Badge color="red">2</Badge>
    </>
  )
}

شارة الحالة

مكوّن منفصل، لأن اللون يتبع الحالة: لا يمكن أن تُعرض شارة «Completed» بالأحمر بالخطأ. stroke أو light، مع أيقونة أو نقطة.

stroke
completedpendingfaileddisabled
light
completedpendingfaileddisabled
مع نقطة
completedpendingfaileddisabled
import { StatusBadge } from "@nili/ui"

export function Example() {
  return (
    <>
      <StatusBadge status="completed">Completed</StatusBadge>
      <StatusBadge status="pending" appearance="light">Pending</StatusBadge>
      <StatusBadge status="failed" dot>Failed</StatusBadge>
      <StatusBadge status="disabled" icon={false}>Disabled</StatusBadge>
    </>
  )
}