نشان (Badge)

import { Badge } from '@parto-system-design/ui'

;<div className="flex flex-wrap gap-2">
  <Badge>پیش‌فرض</Badge>
  <Badge variant="secondary">فرعی</Badge>
  <Badge variant="success">موفقیت</Badge>
  <Badge variant="warning">هشدار</Badge>
  <Badge variant="destructive">خطا</Badge>
  <Badge variant="brand">برند</Badge>
  <Badge variant="outline">حاشیه‌دار</Badge>
</div>

<Badge>پیش‌فرض</Badge>

<Badge variant="secondary">فرعی</Badge>

<Badge variant="success">موفقیت</Badge>

<Badge variant="warning">هشدار</Badge>

<Badge variant="destructive">خطا</Badge>

<Badge variant="brand">برند</Badge>

<Badge variant="outline">حاشیه‌دار</Badge>

<div className="flex items-center gap-2">
  <Badge size="xs">خیلی کوچک</Badge>
  <Badge size="sm">کوچک</Badge>
  <Badge size="md">متوسط</Badge>
  <Badge size="lg">بزرگ</Badge>
</div>

<Badge size="xs">BETA</Badge>

<Badge size="sm">جدید</Badge>
// یا
<Badge>جدید</Badge>

<Badge size="md">در دسترس</Badge>

<Badge size="lg">پیشنهاد ویژه</Badge>

<div className="flex items-center gap-2">
  <Badge dot>آنلاین</Badge>
  <Badge dot variant="success">
    فعال
  </Badge>
  <Badge dot variant="warning">
    در انتظار
  </Badge>
  <Badge dot variant="destructive">
    آفلاین
  </Badge>
</div>

<Badge dot dotPosition="start">نقطه در ابتدا</Badge>
<Badge dot dotPosition="end">نقطه در انتها</Badge>

<div className="flex items-center gap-2">
  <span>وضعیت:</span>
  <Badge>فعال</Badge>
</div>

import { Icons } from '@parto-system-design/ui'

;<Badge>
  <Icons.check className="w-3 h-3 ms-1" />
  تایید شده
</Badge>

<div className="relative inline-block">
  <Icons.bell className="w-6 h-6" />
  <Badge className="absolute -top-1 -end-1 px-1 min-w-[18px] h-[18px] flex items-center justify-center">5</Badge>
</div>