TaavUI Lab
Primitive

TaavButton

دکمه استاندارد برای اقدامات اصلی، ثانویه و خطرناک. ارتفاع، padding و رنگ فقط از props رسمی کنترل می‌شوند.

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

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

استفاده پایه

RTL Previewdark/light via toggle
<TaavButton>ذخیره تغییرات</TaavButton>

Variants

پیش‌نمایش

Sizes

پیش‌نمایش

States

پیش‌نمایش

Props

Propنوعپیش‌فرضتوضیح
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'soft' | 'danger' | 'success' | 'warning' | 'link'primaryسبک بصری دکمه
size'xs' | 'sm' | 'md' | 'lg' | 'xl'mdارتفاع و تایپوگرافی استاندارد
width'auto' | 'full' | 'fit' | 'icon'autoعرض دکمه یا حالت آیکونی
tone'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'info'brandنقش رنگی معنادار
loadingbooleanfalseغیرفعال‌سازی تعامل و نمایش اسپینر
disabledbooleanfalseحالت غیرفعال
iconStartReactNodeآیکون ابتدای متن (RTL)
iconEndReactNodeآیکون انتهای متن (RTL)
aria-labelstringالزامی برای دکمه آیکونی بدون متن

Design Specs

Height mdvar(--taav-btn-height-md)40px
Padding mdvar(--taav-btn-px-md)16px
Radius mdvar(--taav-btn-radius-md)
Focusvar(--taav-focus-ring)
Motionvar(--taav-duration-normal)
Icon gapvar(--taav-btn-gap)
RTL icons

دسترس‌پذیری

راهنمای استفاده در DastRanj / VahedYek

  • برای دکمه آیکونی حتماً aria-label بگذارید.
  • loading باعث aria-busy و غیرفعال شدن تعامل می‌شود.
  • focus-visible با توکن focus-ring مشخص است.

Do / Don't

انجام دهید

  • از variant و tone رسمی برای معنا استفاده کنید
  • برای عملیات async از loading استفاده کنید
  • در VahedYek برای CTA اصلی از primary + brand استفاده کنید

انجام ندهید

  • className دلخواه برای رنگ یا padding ندهید
  • اندازه خارج از size تعریف نکنید
  • danger را برای اقدامات غیر بحرانی استفاده نکنید