Buttons
Easily create buttons in different colors, styles and sizes.
The normal buttons, you'd expect. You can simply use <x-button>Button</x-button> to create a button. Basic parameters like type="button" will automatically be generated.
Every button has the class .btn, followed by the type .btn.btn-primary. The type indicates the color-schema. If you want to change the button's action type (e. G. type="submit"), use the attribute as="submit", see "Submit Buttons" below.
1<x-button>Default Button</x-button>Neutral Buttons
Neutral buttons are used, to indicate to the user, that no important action will be triggered.
1<x-button type="white">White</x-button>2<x-button type="black">Black</x-button>3<x-button type="gray">Gray</x-button>4<x-button type="transparent" href="#">Transparent</x-button>5<x-button type="link">Link</x-button>Action Buttons
Action buttons indicate to the user, that something will happen, when the button is clicked.
1<x-button type="primary">Primary</x-button>2<x-button type="success">Success</x-button>3<x-button type="danger">Danger</x-button>4<x-button type="warning">Warning</x-button>Outline Buttons
Outline buttons share the same hover and active state as the normal buttons.
1<x-button outline type="white">White</x-button>2<x-button outline type="black">Black</x-button>3<x-button outline type="primary">Primary</x-button>4<x-button outline type="success">Success</x-button>5<x-button outline type="danger">Danger</x-button>6<x-button outline type="warning">Warning</x-button>Button Sizes
Buttons can be displayed in different sizes.
1<x-button size="xs">Extra Small</x-button>2<x-button size="sm">Small</x-button>3<x-button size="md">Default</x-button>4<x-button size="lg">Large</x-button>5<x-button size="xl">Extra Large</x-button>Button Icons
Make your buttons more expressive by adding icons.
1<x-button icon="envelope" type="success">Invite</x-button>2<x-button icon-end="arrow-right--micro" type="transparent">Follow link</x-button>3<x-button icon="arrow-down-tray--micro" icon-end="arrow-up-tray--micro" type="primary">Download</x-button>4<x-button icon="ellipsis-horizontal--outline" />5<x-button icon="x-mark" type="transparent" />Loading Buttons
Indicate to the user, that something is happening.
1<x-button type="white" wire:loading>White</x-button>2<x-button type="black" wire:loading>Black</x-button>3<x-button type="gray" wire:loading>Gray</x-button>4<x-button type="primary" wire:loading>Primary</x-button>5<x-button type="success" wire:loading>Success</x-button>6<x-button type="danger" wire:loading>Danger</x-button>7<x-button type="warning" wire:loading>Warning</x-button>Disabled Buttons
Disable buttons to prevent the user from interacting with them.
1<x-button type="white" disabled>White</x-button>2<x-button type="black" disabled>Black</x-button>3<x-button type="gray" disabled>Gray</x-button>4<x-button type="primary" disabled>Primary</x-button>5<x-button type="success" disabled>Success</x-button>6<x-button type="danger" disabled>Danger</x-button>7<x-button type="warning" disabled>Warning</x-button>8<x-button type="transparent" disabled>Transparent</x-button>9<x-button type="link" disabled>Link</x-button>Animated Buttons
Add animated to draw attention to a button. It adds the class .btn-animated, which runs the btn-pulse keyframes endlessly: a ring in the colour of the button type pulses out of the button.
Adjust the animation with CSS variables, either inline as in the second button or in your stylesheet.
| Variable | Default | Description |
|---|---|---|
| --btn-animation-duration | 1.5s | Duration of one pulse. |
| --btn-animation-timing | ease | Timing function of the pulse. |
| --btn-animation-size | 0.4rem | How far the ring spreads before it fades out. |
1<x-button type="primary" animated>Default</x-button> 2<x-button type="success" animated style="--btn-animation-duration: 2.5s; --btn-animation-timing: ease-out; --btn-animation-size: 0.75rem;">Customised</x-button> Image Buttons
Use images as buttons.
1<x-button size="lg"> 2 <img src="{{ Vite::image('avatar/01.jpg') }}" alt="Avatar" /> 3</x-button> 4 5<x-button size="lg" class="radius-circle"> 6 <img class="radius-circle" src="{{ Vite::image('avatar/02.jpg') }}" alt="Avatar" /> 7</x-button> 8 9<x-button size="lg">10 <img class="avatar" src="{{ Vite::image('avatar/03.jpg') }}" alt="Avatar" />11</x-button>Image Buttons with Icons
Add icons to image buttons.
1<x-button size="xs" icon="plus--micro bg-green-500" iconPos="end"> 2 <img src="{{ Vite::image('avatar/01.jpg') }}" alt="Avatar" /> 3</x-button> 4 5<x-button size="lg" icon-end="plus--micro bg-green-500"> 6 <img class="avatar" src="{{ Vite::image('avatar/02.jpg') }}" alt="Avatar" /> 7</x-button> 8 9<x-button size="xs" class="radius-circle" icon="x-mark--micro bg-red-500">10 <img class="radius-circle" src="{{ Vite::image('avatar/03.jpg') }}" alt="Avatar" />11</x-button>12 13<x-button size="xl" class="radius-circle" icon="x-mark--micro bg-red-500">14 <img class="avatar radius-circle" src="{{ Vite::image('avatar/04.jpg') }}" alt="Avatar" />15</x-button>Button Groups
Group buttons together.
1<div class="btn-group"> 2 <x-button>Create</x-button> 3 <x-button>Edit</x-button> 4 <x-button>Delete</x-button> 5</div> 6 7<div class="btn-group"> 8 <x-button icon="bars-3-bottom-left--micro" /> 9 <x-button icon="bars-3--micro" />10 <x-button icon="bars-3-bottom-right--micro" />11</div>Button Attachments
Append or prepend buttons with icons for additional actions.
1<div class="btn-group">2 <x-button>Add Product</x-button>3 <x-button icon="ellipsis-vertical--mini" />4</div>Full Width Buttons
Make buttons span the full width of their container.
1<x-button type="warning" class="w-100" size="lg">Full Width Button</x-button>Buttons as Links
Add href="<link>" to make buttons act as links. The attribute wire:navigate will automatically be added. To prevent this, add :navigate="false" or target="_blank".
For named routes, use route="<name>" instead of href; it wins if both are set. The name is passed to route() without parameters, so a route that requires parameters throws an error. Use :href="route('users.show', $user)" for those.
1<x-button href="#">Internal Link</x-button>2<x-button href="#" :navigate="false">Normal Link</x-button>3<x-button route="docs.bc.get-started">Named Route</x-button> 4<x-button href="https://github.com" target="_blank" icon-end="arrow-up-right--micro">Github</x-button>Submit Buttons
Use the as="submit" attribute to make a button submit a form.
1<x-button as="button">Default</x-button> <!-- Default -->2<x-button as="submit">Submit</x-button>Confirmation
Use confirm to ask the user before a Livewire action runs. Pass a string as the message, or an array with the keys message, title, type, checkbox, button and cancel. The button renders wire:confirm with the message and a data-confirm-* attribute for every other key that is set.
The prop only adds the confirmation, so the button still needs a wire:click. With <x-confirm-dialog /> in your layout the question opens in the styled dialog, otherwise in the browser's native one. See Confirm Dialog for all options and a live demo.
1<x-button wire:click="archive" confirm="Archive this project?">Archive</x-button> 2 3<x-button type="danger" wire:click="delete" :confirm="[ 4 'message' => 'The user and all of their data will be deleted.', 5 'title' => 'Delete user', 6 'type' => 'danger', 7 'checkbox' => 'I understand that this cannot be undone', 8 'button' => 'Yes, delete', 9 'cancel' => 'Keep user',10]">Delete user</x-button>