TaavUI Lab
Components

button

دکمه اصلی برای اجرای یک اقدام مشخص در جریان کاربر.

import { TaavButton } from "@repo/ui/taav/primitives";

کامپوننت اصلی

توکن دکمه افزودن

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

ساختار استاندارد

<TaavButton
  width="auto"
  size="md"
  variant="primary"
  tone="brand"
  unsafeClassName="!h-[40px] !w-[299px] !rounded-[8px] !border-[#009c9f] !bg-[#009c9f] !text-white hover:!border-[#008b8e] hover:!bg-[#008b8e]"
>
  ثبت فرایند
</TaavButton>

دسترسی‌پذیری

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

  • متن دکمه باید اقدام انجام‌شده را به‌صورت واضح بیان کند.
  • دکمه با صفحه‌کلید و حالت focus-visible قابل استفاده است.
  • برای عملیات زمان‌بر از وضعیت loading استفاده کنید.