Buttons
UI Kit tombol modern berbasis Laravel Blade Components. Mendukung variant, size, icon, posisi icon, disabled, loading spinner, dan mode link.
Button Variants
Blade Example
<x-button>Primary</x-button>
<x-button variant="secondary">Secondary</x-button>
<x-button variant="success">Success</x-button>
<x-button variant="danger">Danger</x-button>
<x-button variant="ghost">Ghost</x-button>With Icons
Blade Example
<x-button icon="plus">Tambah</x-button>
<x-button icon="device-floppy" variant="success">Simpan</x-button>
<x-button icon="bell" variant="secondary" class="p-3" />Icon Positions
Blade Example
<div class="p-8 flex flex-wrap gap-6 items-center">
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5"
>
<i class="ti ti-arrow-left text-lg"></i>
<span>Left</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row-reverse bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5"
>
<i class="ti ti-arrow-right text-lg"></i>
<span>Right</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-col bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5"
>
<i class="ti ti-upload text-lg"></i>
<span>Upload</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-col-reverse bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5"
>
<i class="ti ti-chevron-down text-lg"></i>
<span>More</span>
</button>
</div>Button Sizes
Disabled State
Loading / Spinner
Blade Example
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5 pointer-events-none"
>
<svg
class="animate-spin w-4 h-4"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
<span>Loading</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5 pointer-events-none"
>
<svg
class="animate-spin w-4 h-4"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
<span>Saving</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm pointer-events-none p-3"
>
<svg
class="animate-spin w-4 h-4"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-xs px-3 py-1.5 pointer-events-none"
>
<svg
class="animate-spin w-3.5 h-3.5"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
<span>Small</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-base px-6 py-3.5 pointer-events-none"
>
<svg
class="animate-spin w-5 h-5"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
<span>Large</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5 pointer-events-none" disabled="disabled"
>
<svg
class="animate-spin w-4 h-4"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
<span>Disabled Loading</span>
</button>
<a
href="#"
class="inline-flex items-center justify-center gap-2 font-semibold rounded-2xl transition-all duration-200 active:scale-95 cursor-pointer disabled:opacity-50 disabled:pointer-events-none flex-row bg-indigo-600 text-white hover:bg-indigo-700 text-sm px-5 py-2.5 pointer-events-none"
>
<svg
class="animate-spin w-4 h-4"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
/>
</svg>
<span>Redirecting</span>
</a>