Button Group

Group multiple buttons together.

Examples

Basic Group

blade

<x-plume::button-group>
    <x-plume::button style="outline">Left</x-plume::button>
    <x-plume::button>Middle</x-plume::button>
    <x-plume::button style="outline">Right</x-plume::button>
</x-plume::button-group>

Sizing

blade

<x-plume::button-group size="sm">
    <x-plume::button style="outline">Small</x-plume::button>
    <x-plume::button style="outline">Small</x-plume::button>
</x-plume::button-group>

<x-plume::button-group size="lg">
    <x-plume::button style="outline">Large</x-plume::button>
    <x-plume::button style="outline">Large</x-plume::button>
</x-plume::button-group>

Prop	Type	Default	Description
size	string	null	The size of buttons in the group (xs, sm, md, lg, xl).
stack	bool	true	Whether buttons should stack on mobile screens.
style	string	null	The visual style of buttons in the group (primary, secondary, success, error, warning, info, ghost, outline).
shape	string	null	The shape of buttons in the group (default, pill, square).

Usage

blade

<x-plume::button-group size="sm">
                <x-plume::button>Edit</x-plume::button>
                <x-plume::button style="destructive">Delete</x-plume::button>
                </x-plume::button-group>