Maskowlabs – Laravel Packages & Developer Tools

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" you can simply add the attribute actionType="submit".

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.

Transparent

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.

The Livewire's default wire:loading attribute would hide the button and only show it when in a loading state. This package overwrites this attribute to wire:loading.class="loading" when using it in combination with the x-button component. This way your HTML will stay clean and you can easily style the loading state.

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>

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".

Internal Link Normal Link

1<x-button href="#">Internal Link</x-button>
2<x-button href="#" :navigate="false">Normal Link</x-button>
3<x-button 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>