Button

Displays a button or a component that looks like a button.

Examples

Basic Usage

blade

<x-plume::button>
    Default Button
</x-plume::button>

Sizes

blade

<x-plume::button size="sm">Small</x-plume::button>
<x-plume::button size="md">Medium</x-plume::button>
<x-plume::button size="lg">Large</x-plume::button>

Shapes

blade

<x-plume::button style="secondary" shape="pill">Pill Button</x-plume::button>
<x-plume::button aria-label="Add" icon="icon-[fluent--person-24-filled]"
    shape="pill">Button</x-plume::button>
<x-plume::button aria-label="Add" icon="icon-[fluent--person-24-filled]" shape="round" />
<x-plume::button style="secondary" shape="round">X</x-plume::button>

Styles

blade

<x-plume::button style="default">Default</x-plume::button>
<x-plume::button style="secondary">Secondary</x-plume::button>
<x-plume::button style="error">Destructive</x-plume::button>
<x-plume::button style="outline">Outline</x-plume::button>
<x-plume::button style="ghost">Ghost</x-plume::button>
<x-plume::button style="link">Link</x-plume::button>
<x-plume::button style="minor">Minor</x-plume::button>

Disabled

blade

<x-plume::button disabled style="default">Default</x-plume::button>
<x-plume::button disabled style="secondary">Secondary</x-plume::button>
<x-plume::button disabled style="error">Destructive</x-plume::button>
<x-plume::button disabled style="outline">Outline</x-plume::button>
<x-plume::button disabled style="ghost">Ghost</x-plume::button>
<x-plume::button disabled style="link">Link</x-plume::button>
<x-plume::button disabled style="minor">Minor</x-plume::button>

With Icon

blade

<x-plume::button icon="icon-[fluent--add-circle-24-regular]">Add</x-plume::button>
<x-plume::button style="error"
    icon="icon-[fluent--subtract-circle-24-regular]">Remove</x-plume::button>
<x-plume::button aria-label="Add" icon="icon-[fluent--person-24-filled]" />
<x-plume::button style="error" aria-label="Remove" icon="icon-[fluent--delete-24-filled]" />

Delete Button

blade

<x-plume::button style="error" href="#" method="delete"
    confirm="Are you sure you want to delete this?">Delete</x-plume::button>

Confirmation Dialog

blade

<x-plume::button confirm="This action will permanently remove the item. Proceed?">
    Click to Confirm
</x-plume::button>

Prop	Type	Default	Description
href	string	null	URL to navigate to or submit to. Renders as an <a> tag unless $method is provided.
method	string	null	HTTP method for AJAX submission (POST, PUT, PATCH, DELETE).
icon	string	null	Iconify icon name (e.g., 'icon-[fluent--add-24-regular]').
fullWidth	bool	false	Whether the button should take up the full width of its container.
size	string	null	Size of the button: 'sm', 'md', 'lg'.
style	string	null	Visual style: 'default', 'secondary', 'error', 'outline', 'ghost', 'link', 'minor'.
shape	string	null	Shape: 'default', 'pill', 'round'.
confirm	string	null	Native confirmation message to display before action.
onSuccess	string	null	AlpineJS expression or callback function to execute on success.
onError	string	null	AlpineJS expression or callback function to execute on error.

Usage

blade

<x-plume::button>Click Me</x-plume::button>