این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • دکـمـــــه
پیش فرض

از این استایل‌های پیش‌فرض دکمه با رنگ‌های مختلف برای نشان دادن یک عملکرد یا لینک در وبسایت خود استفاده کنید.

<button type="button"
    class="flex items-center justify-center h-10 bg-blue-500 border border-transparent rounded-lg text-white transition-all hover:bg-blue-600active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه پیش‌فرض</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-orange-500 border border-transparent rounded-lg text-white transition-all hover:bg-orange-600 active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه هشــدار</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-red-500 border border-transparent rounded-lg text-white transition-all hover:bg-red-600 active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه خطــر</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-cyan-500 border border-transparent rounded-lg text-white transition-all hover:bg-cyan-600 active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه اطلاعــات</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-green-500 border border-transparent rounded-lg text-white transition-all hover:bg-green-600 active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه موفقیــت</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white border border-zinc-200 dark:border-zinc-800 rounded-lg text-black transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه روشــن</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-zinc-950 border border-zinc-800 rounded-lg text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه تاریــک</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">بدون پـس زمیــنه</span>
</button>
بدون پس زمینه

از استایل‌های دکمه زیر برای این کار استفاده کنید که رنگ فقط برای حاشیه عنصر نمایش داده شود.

<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-blue-500 rounded-lg text-blue-500 transition-all hover:!bg-blue-500 hover:text-white active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه پیش‌فرض</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-orange-500 rounded-lg text-orange-500 transition-all hover:!bg-orange-500 hover:text-white active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه هشــدار</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-red-500 rounded-lg text-red-500 transition-all hover:!bg-red-500 hover:text-white active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه خطــر</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-cyan-500 rounded-lg text-cyan-500 transition-all hover:!bg-cyan-500 hover:text-white active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه اطلاعــات</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-green-500 rounded-lg text-green-500 transition-all hover:!bg-green-500 hover:text-white active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه موفقیــت</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-black dark:border-white rounded-lg text-black dark:text-white transition-all hover:bg-black dark:hover:!bg-white hover:text-white dark:hover:!text-black active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">دکــــــمه پیش زمیــنه</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">بدون پـس زمیــنه</span>
</button>
در حال بارگذاری

از نشانگرهای بارگیری داخل دکمه‌ها برای نشان دادن اینکه چیزی در حال بارگیری است استفاده کنید.

<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white cursor-not-allowed transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">در حــال پــردازش...</span>
    <svg class="animate-spin h-4 w-4 ms-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
        </circle>
        <path class="opacity-75" fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
        </path>
    </svg>
</button>
همراه با آیکن

برای قرار دادن یک آیکن SVG داخل دکمه در سمت چپ یا راست از نمونه‌های زیر استفاده کنید.

<button type="button"
    class="flex items-center justify-center h-10 bg-blue-500 border border-transparent rounded-lg text-white transition-all hover:bg-blue-600 active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">افــزودن بـه سبــد</span>
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-2">
        <path
            d="M136,120v56a8,8,0,0,1-16,0V120a8,8,0,0,1,16,0Zm36.84-.8-5.6,56A8,8,0,0,0,174.4,184a7.32,7.32,0,0,0,.81,0,8,8,0,0,0,7.95-7.2l5.6-56a8,8,0,0,0-15.92-1.6Zm-89.68,0a8,8,0,0,0-15.92,1.6l5.6,56a8,8,0,0,0,8,7.2,7.32,7.32,0,0,0,.81,0,8,8,0,0,0,7.16-8.76ZM239.93,89.06,224.86,202.12A16.06,16.06,0,0,1,209,216H47a16.06,16.06,0,0,1-15.86-13.88L16.07,89.06A8,8,0,0,1,24,80H68.37L122,18.73a8,8,0,0,1,12,0L187.63,80H232a8,8,0,0,1,7.93,9.06ZM89.63,80h76.74L128,36.15ZM222.86,96H33.14L47,200H209Z">
        </path>
    </svg>
</button>
آیکن

گاهی اوقات برای نمایش یک عمل به دکمه‌ای نیاز دارید که تنها شامل یک آیکن باشد.

<button type="button"
    class="flex items-center justify-center w-10 h-10 bg-blue-500 border border-transparent rounded-full text-white transition-all hover:bg-blue-600 active:scale-95">
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
        <path
            d="M238,82.73A8,8,0,0,0,232,80H187.63L134,18.73a8,8,0,0,0-12,0L68.37,80H24a8,8,0,0,0-7.93,9.06L31.14,202.12A16.06,16.06,0,0,0,47,216H209a16.06,16.06,0,0,0,15.86-13.88L239.93,89.06A8,8,0,0,0,238,82.73ZM81.6,184a7.32,7.32,0,0,1-.81,0,8,8,0,0,1-8-7.2l-5.6-56a8,8,0,0,1,15.92-1.6l5.6,56A8,8,0,0,1,81.6,184Zm54.4-8a8,8,0,0,1-16,0V120a8,8,0,0,1,16,0ZM89.63,80,128,36.15,166.37,80Zm99.13,40.8-5.6,56a8,8,0,0,1-7.95,7.2,7.32,7.32,0,0,1-.81,0,8,8,0,0,1-7.16-8.76l5.6-56a8,8,0,0,1,15.92,1.6Z">
        </path>
    </svg>
</button>
<button type="button"
    class="flex items-center justify-center w-10 h-10 bg-white dark:bg-zinc-950 border border-red-500 rounded-full text-red-500 transition-all hover:!bg-red-500 hover:text-white active:scale-95">
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
        <path
            d="M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z">
        </path>
    </svg>
</button>
همراه با برچسب

این مثال نحوه‌ی نمایش یک اخطار یا متنی برای راهنمایی کاربر را داخل یک دکمه به شما نشان می‌دهد.

<button type="button"
    class="flex items-center justify-center relative h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">اعلانات</span>
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 ms-2">
        <path
            d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z">
        </path>
    </svg>
    <span class="absolute -top-1 rtl:-left-1 ltr:-right-1 flex h-3 w-3">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
    </span>
</button>
<button type="button"
    class="flex items-center justify-center relative w-10 h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-black dark:text-white transition-all active:scale-95">
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5">
        <path
            d="M238,82.73A8,8,0,0,0,232,80H187.63L134,18.73a8,8,0,0,0-12,0L68.37,80H24a8,8,0,0,0-7.93,9.06L31.14,202.12A16.06,16.06,0,0,0,47,216H209a16.06,16.06,0,0,0,15.86-13.88L239.93,89.06A8,8,0,0,0,238,82.73ZM81.6,184a7.32,7.32,0,0,1-.81,0,8,8,0,0,1-8-7.2l-5.6-56a8,8,0,0,1,15.92-1.6l5.6,56A8,8,0,0,1,81.6,184Zm54.4-8a8,8,0,0,1-16,0V120a8,8,0,0,1,16,0ZM89.63,80,128,36.15,166.37,80Zm99.13,40.8-5.6,56a8,8,0,0,1-7.95,7.2,7.32,7.32,0,0,1-.81,0,8,8,0,0,1-7.16-8.76l5.6-56a8,8,0,0,1,15.92,1.6Z">
        </path>
    </svg>
    <span class="absolute -top-0.5 rtl:-left-0.5 ltr:-right-0.5 flex h-3 w-3">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
    </span>
</button>
گرد شده

از دکمه‌های گرد در سطوح مختلف برای ظاهری مدرن و جذاب در رابط کاربری خود استفاده کنید.

<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-none text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">ندارد</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-md text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">کم</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">متوسط</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-xl text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">زیاد</span>
</button>
<button type="button"
    class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-black dark:text-white transition-all active:scale-95 px-5">
    <span class="font-semibold text-xs whitespace-nowrap">کاملا گرد شده</span>
</button>