Plume UI

Button

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

Examples

Sizes

Styles

Disabled

Shapes

With Icon

Special States

Button Groups

Properties

Button

Prop Type Default Description
style string default Options: default, secondary, destructive, outline, ghost, link.
size string md Options: sm, md, lg.
shape string default Options: default, pill, round.
href string null Renders as an anchor tag if provided.
icon string null Icon class name.
fullWidth boolean false Expand to 100% width.

Button Loader

Prop Type Default Description
var string - Required. AlpineJS boolean variable to control loading state.

Button Toggle

Prop Type Default Description
var string - Required. AlpineJS boolean variable.
on string null Label when true.
off string null Label when false.
offStyle string null Button style when false.

Usage

Basic Button

blade 
<x-plume::button style="primary" size="md">
    Click Me
</x-plume::button>

Loading Button

blade 
<x-plume::button.loader var="isLoading" style="secondary">
    Save Changes
</x-plume::button.loader>

Toggle Button

blade 
<x-plume::button.toggle 
    var="isNotificationsEnabled" 
    on="Disable Notifications" 
    off="Enable Notifications" 
/>