Button

Basic

You can apply any daisyUI/Tailwind style.

{{--  COLOR AND STYLE --}}
<x-button label="Hi!" class="btn-outline" />
<x-button label="How" class="btn-warning" />
<x-button label="Are" class="btn-success" />
<x-button label="You?" class="btn-error btn-sm" />
 
{{-- SLOT--}}
<x-button class="btn-primary">
    With default slot 😃
</x-button>
 
{{-- CIRCLE --}}
<x-button icon="o-user" class="btn-circle" />
<x-button icon="o-user" class="btn-circle btn-outline" />
 
{{-- SQUARE --}}
<x-button icon="o-user" class="btn-circle btn-ghost" />
<x-button icon="o-user" class="btn-square" />

Icons

Icons left and right. See Icons.

<x-button label="Hello" icon-right="o-x-circle" />
 
<x-button label="There" icon="o-check" />

Tooltips

Tooltips are disabled on small screens.

<x-button label="Up" tooltip="Mary" />
 
<x-button label="Bottom" tooltip-bottom="Joe" />
 
<x-button label="Left" tooltip-left="Marina" />
 
<x-button label="Right" tooltip-right="Amanda" />

Badges

<x-button label="Hello" badge="12" />
 
<x-button label="There" badge="8" badge-classes="badge-warning" />

Responsive

On small screens the label is hidden. Icon and badge are keep.

<x-button label="There" icon="o-home" badge="12" responsive />
 
<x-button label="There" icon="o-check" responsive />

Links

You can make a button act as a link by placing a link property. You can use all the options described above for ordinary buttons.

Go to installation Go to demos Google

{{--  It uses `wire:navigate` --}}
<x-button label="Go to installation" link="/docs/installation" class="btn-ghost" />
 
{{--  Notice `no-wire-navigate` --}}
<x-button label="Go to demos" link="/docs/demos" no-wire-navigate class="btn-ghost" />
 
{{--  Notice `external` for external links  --}}
<x-button label="Google" link="https://google.com" external icon="o-link" tooltip="Go away!" />

Spinners

{{-- It automatically targets to self `wire:click` action  --}}
<x-button label="Self target" wire:click="save" icon-right="o-lock-closed" spinner />
 
<x-form wire:submit="save2">
    <x-input label="Name" inline />
    <x-slot:actions>
        {{-- No target spinner --}}
        <x-button label="No target" />
 
        {{-- Target is `save2` --}}
        <x-button label="Custom target" type="submit" class="btn-primary" spinner="save2" />
    </x-slot:actions>
</x-form>

maryUI

Sponsor