Button

A versatile button component containing icons, loading-states, badges, tooltips and more.

Property	Type	Description
id	?string	A unique identifier.
label	?string	The text content of the button.
icon	?string	The icon that should be shown on the left side.
icon-right	?string	The icon that should be shown on the right side.
icon-class	?string	The class that should be applied to the icon (both sides).
spinner	?string	If a spinner should be shown while loading or the target function.
link	?string	The link of the button. Changes to <a> tag if given.
external	bool	If the $link is an external website or not. [default=false]
no-wire-navigate	bool	Don't use the wire:navigate directive. [default=false]
responsive	bool	If true the label will only been shown on lg: or bigger screens. [default=false]
badge	?string	The badge that should be shown at the end of the button.
badge-class	?string	The class that should be applied to the badge.
tooltip	?string	The tooltip on top of the button.
tooltip-right	?string	The tooltip on the right of the button.
tooltip-bottom	?string	The tooltip on bottom of the button.
tooltip-left	?string	The tooltip on the left of the button.

Content

{{-- Label --}}
<c-button label="With label" />

{{-- Slot --}}
<c-button>With slot</c-button>

Colors

Soft colors

<c-button label="Neutral" class="btn-neutral" />
<c-button label="Primary" class="btn-primary" />
<c-button label="Secondary" class="btn-secondary" />
<c-button label="Accent" class="btn-accent" />
<c-button label="Info" class="btn-info" />
<c-button label="Success" class="btn-success" />
<c-button label="Warning" class="btn-warning" />
<c-button label="Error" class="btn-error" />

<c-divider class="my-3" label="Soft colors" />

<c-button label="Neutral" class="btn-neutral btn-soft" />
<c-button label="Primary" class="btn-primary btn-soft" />
<c-button label="Secondary" class="btn-secondary btn-soft" />
<c-button label="Accent" class="btn-accent btn-soft" />
<c-button label="Info" class="btn-info btn-soft" />
<c-button label="Success" class="btn-success btn-soft" />
<c-button label="Warning" class="btn-warning btn-soft" />
<c-button label="Error" class="btn-error btn-soft" />

Icons & Shapes

Shapes

<c-button label="Icon left" icon="user" />
<c-button label="Icon right" icon-right="user" />
<c-button label="Icons" icon="user" icon-right="user" icon-class="text-accent" />
<c-button icon="user" tooltip="Icon only" />

<c-divider class="my-3" label="Shapes" />

<c-button icon="user" class="btn-circle" />
<c-button icon="user" class="btn-circle btn-outline" />
<c-button icon="user" class="btn-circle btn-ghost" />
<c-button icon="user" class="btn-square" />

Badges

<c-button label="Hello" badge="12" />
<c-button label="There" badge="8" badge-class="badge-warning" />
<c-button label="There" badge="new" badge-class="badge-accent" />

Spinner (Loading state)

<c-form wire:submit="testSpinner2">
    <c-input placeholder="Name" />

    <c-slot:actions>
        <c-button label="Self target" icon="circle-dashed-check" wire:click="testSpinner1" spinner />
        <c-button label="No target" />
        <c-button label="Custom target" type="submit" class="btn-primary" icon-right="check"
            spinner="testSpinner2" />
    </c-slot:actions>
</c-form>

Links

Go to installation Landing page External website

{{--  Uses `wire:navigate` by default --}}
<c-button label="Go to installation" link="/docs/install" class="btn-ghost underline" />

{{--  NOTE: `no-wire-navigate` --}}
<c-button label="Landing page" link="/" no-wire-navigate class="btn-ghost" />

{{--  NOTE: `external` for external links  --}}
<c-button label="External website" link="https://feichtinger.dev" external />

Tooltips

<c-button label="Top" tooltip="Top" />
<c-button label="Right" tooltip-right="Right" />
<c-button label="Bottom" tooltip-bottom="Bottom" />
<c-button label="Left" tooltip-left="Left" />

Responsive

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