Primitive

TaavBadge

نشان وضعیت و chip با عرض استاندارد، تراز RTL و toneهای معنادار.

import { TaavBadge } from '@repo/ui';

فقط از props رسمی TaavUI استفاده کنید. unsafeClassName و escape hatchهای مشابه فقط برای موارد نادر هستند و نباید در مثال‌های عادی دیده شوند.

استفاده پایه

RTL Preview

تایید شده

<TaavBadge tone="brand" iconStart={<Check />}>تایید شده</TaavBadge>

پیش‌نمایش

neutralbrandsuccesswarningdangerinfopurple

پیش‌نمایش

auto — عرض محتواfixed — عرض ثابتfull — تمام عرض

Prop	نوع	پیش‌فرض	توضیح
`tone`	'neutral' \| 'brand' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'purple'	neutral	معنای وضعیت
`variant`	'solid' \| 'soft' \| 'outline' \| 'subtle'	soft	شدت بصری
`size`	'sm' \| 'md' \| 'lg'	md	ارتفاع و فونت استاندارد
`shape`	'pill' \| 'rounded' \| 'square'	pill	شکل گوشه‌ها
`width`	'auto' \| 'fixed' \| 'full'	auto	عرض محتوا، ثابت یا کامل
`iconStart`	ReactNode	—	آیکون قبل از متن
`iconEnd`	ReactNode	—	آیکون بعد از متن

Height mdvar(--taav-badge-height-md)

Fixed widthvar(--taav-badge-width-fixed)

Radius pillvar(--taav-radius-pill)

Fontvar(--taav-text-xs)

width: fixed