EUIKit

Buttons

The <x-euikit::button /> component is used to create a clickable button. It's a button. You know what a button is.

The button component can take several attributes.

Attribute	Required?	Default	Description
`type`	No	"info"	Type of button. Can take any of the Colors and Types common to other EUIKit components. Defaults to "info" if not specified.
`route`	No	(none)	Route to go to when the button is clicked. If defined, the button will be rendered using the `<a />` tag rather than the `<button />` tag, though it will be visually identical.
`value`	No	"Submit"	The text to render inside the button.
`title`	No	(none)	Text to render as a tooltip when hovering over the button.
`lefticon`	No	(none)	Icon to place on the left side of the button. The icon will be rendered with the `@svg()` Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.
`righticon`	No	(none)	Icon to place on the right side of the button. The icon will be rendered with the `@svg()` Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.

Buttons and Livewire

The button component is ready to be used with Livewire. Any wire: attributes will be rendered on either the <a /> tag (for a button that has a route attribute) or the <button /> tag.

Delete button

Buttons with a type="delete" are handled specially. Typically, a delete button will have a Livewire wire:click attribute attached.

When the user clicks on a delete button, the button will be replaced with an "Are you sure" prompt. If the user clicks "No" in response to this prompt, no action will be taken, and the delete button will return. If the user clicks the "Yes" button in response to this prompt, two actions will be taken that you can hook into:

The deleting Javascript event will be dispatched. Livewire, AlpineJS, etc., can hear this event and act on it.
An HTML form will be submitted. The form will use the route attribute, if specified, as its action, with the delete HTML method.

Are you sure?

Example buttons


                    <x-euikit::button />


                    <x-euikit::button value="Click here" type="success" />


                    <x-euikit::button type="ghost" lefticon="heroicon-o-archive-box" value="With left icon" />

Button with route


                <x-e::button type="primary" route="#" righticon="heroicon-o-cube-transparent" value="Button with route" />