BlatUI

Components

Button

Displays a button or a component that looks like a button.

php artisan blatui:add button 
<x-ui.button>Button</x-ui.button>

Loading

<x-ui.button disabled>
    <x-lucide-loader-circle class="animate-spin" />
    Please wait
</x-ui.button>

Sizes

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button size="sm">Small</x-ui.button>
    <x-ui.button>Default</x-ui.button>
    <x-ui.button size="lg">Large</x-ui.button>
    <x-ui.button size="icon"><x-lucide-plus /></x-ui.button>
</div>

Variants

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button>Default</x-ui.button>
    <x-ui.button variant="secondary">Secondary</x-ui.button>
    <x-ui.button variant="destructive">Destructive</x-ui.button>
    <x-ui.button variant="outline">Outline</x-ui.button>
    <x-ui.button variant="ghost">Ghost</x-ui.button>
    <x-ui.button variant="link">Link</x-ui.button>
</div>

With Icon

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button variant="outline"><x-lucide-mail /> Login with Email</x-ui.button>
    <x-ui.button><x-lucide-download /> Download</x-ui.button>
</div>