Dejavu Docs

Buttons

A powerful button composable component for you application.

<x-ui::primary-button>Home</x-ui::primary-button>

Copied!

Variants

Three different button styles are currently available, which are primary, secondary and tertiary. Only the visuals change between them, functionality remains the same.

Use primary buttons sparingly; mostly for form submissions and clear main actions.

<x-ui::primary-button>Primary</x-ui::primary-button>
<x-ui::secondary-button>Secondary</x-ui::secondary-button>
<x-ui::tertiary-button>Tertiary</x-ui::tertiary-button>

Copied!

Icons

The button components have built in support for icons. You can add icons to the left or right of the text. It uses the icon component under the hood.

The icon is meant to be used in default styling and size, therefore if you need more flexibility (for example changing the size or animating) it is recommended to skip using the prop and use the icon component directly.

<x-ui::primary-button icon="home">Home</x-ui::primary-button>
<x-ui::primary-button rightIcon="caret-down">Menu</x-ui::primary-button>
<x-ui::secondary-button icon="bolt" rightIcon="arrow-right">Lightning fast</x-ui::secondary-button>
<x-ui::secondary-button icon="ellipsis" />
<x-ui::tertiary-button icon="xmark" />

Copied!

Icon color

You can change the color of the icon. The class provided will be applied to the icon, so you can use any color class from tailwindcss or a regular css class.

The class given must modify the text color, not the background color. So use text- classes from tailwindcss.

<x-ui::secondary-button icon="home" iconColor="text-yellow-500">Home</x-ui::secondary-button>

Copied!

Hide text on small devices

You have the hability to hide the text on small devices, and only show the icon. This is useful when in mobile devices you want to save space for other content.

It uses tailwindcss sm breakpoint to hide the text under the hood, therefore you can override this behavior it in your own tailwindcss configuration if wanted.

<x-ui::primary-button icon="home" hideTextOnSm>Home</x-ui::primary-button>

Copied!

Loading

Buttons with wire:click or type="submit" will automatically show a loading indicator and disable pointer events during network requests.

<x-ui::primary-button :async="true">Async until reload</x-ui::primary-button>
<x-ui::secondary-button action="async () => {
    await fetch('/')
}">Async with action</x-ui::secondary-button>

Copied!

Arrow buttons

Useful when repeating the same button in a step by step process. They can be used to showcase the next or previous step.

<x-ui::go-button>Let's go</x-ui::go-button>
<x-ui::back-button>Go back</x-ui::back-button>

Copied!

Ajax form button

A button that can be used in a form to submit the form with ajax. It shows the loading indicator, and a success or warning depending on the response of the ajax submit response.

<form action="https://google.com" method="POST" class="mt-4">
    <x-ui::ajax-form-button class="w-56">Submits a form with ajax</x-ui::ajax-form-button>
</form>

Copied!

Confirm

Sometimes you might to show the javascript confirm alert before performing the button action.

<x-ui::secondary-button icon="trash" confirm="Are you sure you want to delete?">Delete</x-ui::secondary-button>

Copied!

Javascript functions

Buttons can also run javascript functions with the action tag.

<x-ui::secondary-button action="function() { alert('Custom Javascript action') }" icon="triangle-exclamation">Alert</x-ui::secondary-button>

Copied!