نشان (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="tiny">خیلی کوچک</Badge>
  <Badge size="small">کوچک</Badge>
  <Badge size="large">بزرگ</Badge>
</div>

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

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

<Badge size="large">پیشنهاد ویژه</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>