Toggle Button

A button that toggles between two states.

Examples

Toggle Switch

Use two different labels and styles for the ON and OFF states.

blade

<div x-data="{ enabled: false }">
    ...
    <x-plume::button.toggle var="enabled" style="primary" offStyle="outline" on="Notifications On"
        off="Notifications Off" />
    ...
</div>

Prop	Type	Default	Description
var	string	null	AlpineJS variable name that controls the toggle state.
size	string	'md'	Size of the buttons (xs, sm, md, lg, xl).
style	string	null	Style of the 'on' button (primary, outline, etc.).
offStyle	string	null	Style of the 'off' button.
on	string	null	Text or HTML for the 'on' state.
off	string	null	Text or HTML for the 'off' state.
click	string	null	Custom JavaScript to execute on click instead of default toggle logic.

Usage

blade

<x-plume::button.toggle var="active" on="Active" off="Inactive" />