Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Buttons

Using Buttons

Use <ui:button> to create a button of the default variant (solid) and color (secondary).

Using Buttons
Copied!
 
1<ui:button>Happy Little Button</ui:button>
1<ui:button>Happy Little Button</ui:button>

Properties

Buttons support several other properties that can be used to customize their appearance and/or functionality. Here's an overview of all the available properties:

Property Type Default Description
color string | Color secondary The color of the button.
size string | Size md The size of the button.
variant string | Variant solid The variant of the button.
radius string | Size sm The border radius of the button.
href string null The URL the button should link to.
disabled boolean false Whether the button is disabled.

Colors

Buttons support colors primary, secondary (default), success, warning, and danger. The color prop accepts a string or a Color enum to define this value.

Button Colors
Copied!
 
1<ui:button color="primary">Primary</ui:button>
2<ui:button color="secondary">Secondary</ui:button>
3<ui:button color="success">Success</ui:button>
4<ui:button color="warning">Warning</ui:button>
5<ui:button color="danger">Danger</ui:button>
1<ui:button color="primary">Primary</ui:button>
2<ui:button color="secondary">Secondary</ui:button>
3<ui:button color="success">Success</ui:button>
4<ui:button color="warning">Warning</ui:button>
5<ui:button color="danger">Danger</ui:button>

Icons

Easily add an Icon before the button's text with the icon prop.

1<ui:button icon="arrow-left">Icon Example</ui:button>
1<ui:button icon="arrow-left">Icon Example</ui:button>
Copied!

You can also add an icon after the button's text with the icon-after prop.

1<ui:button icon-after="arrow-right">Icon Example</ui:button>
1<ui:button icon-after="arrow-right">Icon Example</ui:button>
Copied!
Buttons with Icons
Copied!
 
1<ui:button icon="arrow-left">Icon Before</ui:button>
2<ui:button icon="arrow-left" icon-after="arrow-right">Why Not Both?</ui:button>
3<ui:button icon-after="arrow-right">Icon After</ui:button>
1<ui:button icon="arrow-left">Icon Before</ui:button>
2<ui:button icon="arrow-left" icon-after="arrow-right">Why Not Both?</ui:button>
3<ui:button icon-after="arrow-right">Icon After</ui:button>

Sizing

Buttons support sizes xs, sm, md (default), lg, and xl. You can disable default sizing and specify your own by using the size attribute with an unsupported value like size="none"... or even size="bogus" if that's your jam.

Button Sizing
Copied!
xs
sm
md
lg
xl
 1<div class="text-center">
 2    <ui:button size="xs">Button</ui:button>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xs</div>
 4</div>
 5<div class="text-center">
 6    <ui:button size="sm">Button</ui:button>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
 8</div>
 9<div class="text-center">
10    <ui:button size="md">Button</ui:button>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
12</div>
13<div class="text-center">
14    <ui:button size="lg">Button</ui:button>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
16</div>
17<div class="text-center">
18    <ui:button size="xl">Button</ui:button>
19    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xl</div>
20</div>
 1<div class="text-center">
 2    <ui:button size="xs">Button</ui:button>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xs</div>
 4</div>
 5<div class="text-center">
 6    <ui:button size="sm">Button</ui:button>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
 8</div>
 9<div class="text-center">
10    <ui:button size="md">Button</ui:button>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
12</div>
13<div class="text-center">
14    <ui:button size="lg">Button</ui:button>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
16</div>
17<div class="text-center">
18    <ui:button size="xl">Button</ui:button>
19    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xl</div>
20</div>

Radius

Control the border radius with these options: none, sm (default), md, lg, xl, and full.

Button Corner Radius
Copied!
none
sm
md
lg
xl
full
 1<div class="text-center">
 2    <ui:button radius="none">Button</ui:button>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">none</div>
 4</div>
 5<div class="text-center">
 6    <ui:button radius="sm">Button</ui:button>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
 8</div>
 9<div class="text-center">
10    <ui:button radius="md">Button</ui:button>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
12</div>
13<div class="text-center">
14    <ui:button radius="lg">Button</ui:button>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
16</div>
17<div class="text-center">
18    <ui:button radius="xl">Button</ui:button>
19    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xl</div>
20</div>
21<div class="text-center">
22    <ui:button radius="full">Button</ui:button>
23    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">full</div>
24</div>
 1<div class="text-center">
 2    <ui:button radius="none">Button</ui:button>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">none</div>
 4</div>
 5<div class="text-center">
 6    <ui:button radius="sm">Button</ui:button>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
 8</div>
 9<div class="text-center">
10    <ui:button radius="md">Button</ui:button>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
12</div>
13<div class="text-center">
14    <ui:button radius="lg">Button</ui:button>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
16</div>
17<div class="text-center">
18    <ui:button radius="xl">Button</ui:button>
19    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xl</div>
20</div>
21<div class="text-center">
22    <ui:button radius="full">Button</ui:button>
23    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">full</div>
24</div>

Variant

Buttons come in two variants: solid (default) and ghost.

Solid Variant
Copied!
 
1<ui:button color="primary">Primary</ui:button>
2<ui:button color="secondary">Secondary</ui:button>
3<ui:button color="success">Success</ui:button>
4<ui:button color="warning">Warning</ui:button>
5<ui:button color="danger">Danger</ui:button>
1<ui:button color="primary">Primary</ui:button>
2<ui:button color="secondary">Secondary</ui:button>
3<ui:button color="success">Success</ui:button>
4<ui:button color="warning">Warning</ui:button>
5<ui:button color="danger">Danger</ui:button>
Ghost Variant
Copied!
 
1<ui:button color="primary" variant="ghost">Primary</ui:button>
2<ui:button color="secondary" variant="ghost">Secondary</ui:button>
3<ui:button color="success" variant="ghost">Success</ui:button>
4<ui:button color="warning" variant="ghost">Warning</ui:button>
5<ui:button color="danger" variant="ghost">Danger</ui:button>
1<ui:button color="primary" variant="ghost">Primary</ui:button>
2<ui:button color="secondary" variant="ghost">Secondary</ui:button>
3<ui:button color="success" variant="ghost">Success</ui:button>
4<ui:button color="warning" variant="ghost">Warning</ui:button>
5<ui:button color="danger" variant="ghost">Danger</ui:button>

Links (href)

Use the href prop to turn a button into an <a> tag instead of a <button>. If you need to conditionally apply a link, use the link component (<ui:link>) instead.

Buttons as Links
Copied!
This Button Links to the Laravel Docs 
1<ui:button href="https://laravel.com" variant="ghost" color="danger">This Button Links to the Laravel Docs</ui:button>
1<ui:button href="https://laravel.com" variant="ghost" color="danger">This Button Links to the Laravel Docs</ui:button>

Disabled State

Each variant also has a disabled state. The disabled prop accepts a boolean value.

Solid Variant (Disabled)
Copied!
 
1<ui:button :disabled="true">Primary</ui:button>
2<ui:button :disabled="true" color="secondary">Secondary</ui:button>
3<ui:button :disabled="true" color="success">Success</ui:button>
4<ui:button :disabled="true" color="warning">Warning</ui:button>
5<ui:button :disabled="true" color="danger">Danger</ui:button>
1<ui:button :disabled="true">Primary</ui:button>
2<ui:button :disabled="true" color="secondary">Secondary</ui:button>
3<ui:button :disabled="true" color="success">Success</ui:button>
4<ui:button :disabled="true" color="warning">Warning</ui:button>
5<ui:button :disabled="true" color="danger">Danger</ui:button>
Ghost Variant (Disabled)
Copied!
 
1<ui:button :disabled="true" color="primary" variant="ghost">Primary</ui:button>
2<ui:button :disabled="true" color="secondary" variant="ghost">Secondary</ui:button>
3<ui:button :disabled="true" color="success" variant="ghost">Success</ui:button>
4<ui:button :disabled="true" color="warning" variant="ghost">Warning</ui:button>
5<ui:button :disabled="true" color="danger" variant="ghost">Danger</ui:button>
1<ui:button :disabled="true" color="primary" variant="ghost">Primary</ui:button>
2<ui:button :disabled="true" color="secondary" variant="ghost">Secondary</ui:button>
3<ui:button :disabled="true" color="success" variant="ghost">Success</ui:button>
4<ui:button :disabled="true" color="warning" variant="ghost">Warning</ui:button>
5<ui:button :disabled="true" color="danger" variant="ghost">Danger</ui:button>

Loading States

Buttons automatically try to show a loading state based on Livewire requests. All submit buttons show loading states. Buttons with wire:click attributes are targeted automatically for loading states too!

Loading States
Copied!
 
 1<div class="text-center">
 2    <?php
 3    use function Livewire\Volt\state;
 4 
 5    state('loading', false);
 6    $simulateLoading = function () {
 7        $this->loading = true;
 8        sleep(2);
 9        $this->loading = false;
10    };
11    ?>
12    @volt
13    <ui:button wire:click="simulateLoading">Simulate Loading State</ui:button>
14    @endvolt
15</div>
16 
17<div class="mt-8 flex flex-col sm:flex-row gap-3 sm:items-end justify-center py-4">
18    <ui:button color="primary" data-ui-loading>Primary</ui:button>
19    <ui:button color="secondary" data-ui-loading>Secondary</ui:button>
20    <ui:button color="success" data-ui-loading>Success</ui:button>
21    <ui:button color="warning" data-ui-loading>Warning</ui:button>
22    <ui:button color="danger" data-ui-loading>Danger</ui:button>
23</div>
 1<div class="text-center">
 2    <?php
 3    use function Livewire\Volt\state;
 4 
 5    state('loading', false);
 6    $simulateLoading = function () {
 7        $this->loading = true;
 8        sleep(2);
 9        $this->loading = false;
10    };
11    ?>
12    @volt
13    <ui:button wire:click="simulateLoading">Simulate Loading State</ui:button>
14    @endvolt
15</div>
16 
17<div class="mt-8 flex flex-col sm:flex-row gap-3 sm:items-end justify-center py-4">
18    <ui:button color="primary" data-ui-loading>Primary</ui:button>
19    <ui:button color="secondary" data-ui-loading>Secondary</ui:button>
20    <ui:button color="success" data-ui-loading>Success</ui:button>
21    <ui:button color="warning" data-ui-loading>Warning</ui:button>
22    <ui:button color="danger" data-ui-loading>Danger</ui:button>
23</div>

Tooltips

Buttons have a tooltip property for convenience. It's a shortcut for adding a tooltip to the button.

Button Tooltips
Copied!
 
1<ui:button tooltip="Thank you for hovering!">Hover Me, Please!</ui:button>
1<ui:button tooltip="Thank you for hovering!">Hover Me, Please!</ui:button>
Like this project? Stop by the bear cave to stargaze.