دکمه

از این کامپوننت‌های دکمه استفاده کنید تا اقدامات و عملکردهای مختلف را در رابط کاربری خود نمایش دهید.
این دکمه‌ها با Tailwind CSS طراحی و ساخته شده‌اند و در اندازه‌ها و سبک‌های متنوع، از جمله دکمه‌های اصلی و ثانویه، در دسترس هستند.

دکمه اقدام اصلی

<!-- Blue -->
<button type="button"
    class="inline-flex items-center justify-center h-9 bg-blue-500 border border-blue-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-blue-400 disabled:border-blue-400 hover:bg-blue-500/90 px-3">
    تأیید پرداخت
</button>

همراه با آیکن

<!-- Neutral -->
<button type="button"
    class="inline-flex items-center justify-center h-9 bg-neutral-500 border border-neutral-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-neutral-400 disabled:border-neutral-400 hover:bg-neutral-500/90 px-3">
    ارسال پیام
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5 ms-2">
        <path fill-rule="evenodd"
            d="M1 8.74c0 .983.713 1.825 1.69 1.943.764.092 1.534.164 2.31.216v2.351a.75.75 0 0 0 1.28.53l2.51-2.51c.182-.181.427-.286.684-.294a44.298 44.298 0 0 0 3.837-.293C14.287 10.565 15 9.723 15 8.74V4.26c0-.983-.713-1.825-1.69-1.943a44.447 44.447 0 0 0-10.62 0C1.712 2.435 1 3.277 1 4.26v4.482ZM5.5 6.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2.5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm3.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
            clip-rule="evenodd" />
    </svg>
</button>

فقط آیکن

<!-- Red -->
<button type="button"
    class="inline-flex items-center justify-center size-9 bg-red-500 border border-red-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-zinc-100 cursor-pointer disabled:cursor-default disabled:bg-red-400 disabled:border-red-400 hover:bg-red-500/90">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
        <path
            d="M1.75 1.002a.75.75 0 1 0 0 1.5h1.835l1.24 5.113A3.752 3.752 0 0 0 2 11.25c0 .414.336.75.75.75h10.5a.75.75 0 0 0 0-1.5H3.628A2.25 2.25 0 0 1 5.75 9h6.5a.75.75 0 0 0 .73-.578l.846-3.595a.75.75 0 0 0-.578-.906 44.118 44.118 0 0 0-7.996-.91l-.348-1.436a.75.75 0 0 0-.73-.573H1.75ZM5 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM13 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
    </svg>
</button>