Neura UI

Loading…

Logo
Neura UI
All pages 99

Split button

A primary action joined to a menu of close alternatives.

Basic usage

The main click runs like an action button: the label morphs through pending and success, a ring spinner shows while it works, then a check, and it returns on its own. Each menu action can carry the same pending-label, success-label, done-label and reset-after. The chevron stays still and opens the alternatives.
blade 
<neura::split-button
    label="Merge pull request"
    method="merge"
    pending-label="Merging"
    success-label="Merged"
    :actions="[
        ['label' => 'Squash and merge', 'method' => 'squash', 'pending-label' => 'Squashing', 'success-label' => 'Squashed'],
        ['label' => 'Rebase and merge', 'method' => 'rebase', 'pending-label' => 'Rebasing', 'done-label' => 'Rebased', 'reset-after' => 1600],
        ['label' => 'Close pull request', 'method' => 'closeRequest', 'color' => 'danger', 'pending-label' => 'Closing', 'success-label' => 'Closed'],
    ]"
/>

Slots

The menu can be built with items in the slot, and a leading icon can replace the icon name. Choosing an item becomes the main action and runs the same pending and success cycle.
blade 
<neura::split-button label="Publish" method="merge" pending-label="Publishing" success-label="Published">
    <x-slot:leading>
        <neura::icon name="paper-airplane" class="size-4" />
    </x-slot:leading>
    <neura::split-button.item label="Publish quietly" method="squash" icon="eye-slash" pending-label="Publishing quietly" success-label="Published" reset-after="1600" />
    <neura::split-button.item label="Discard" method="closeRequest" icon="trash" color="danger" />
</neura::split-button>

Size, color, radius

Size, variant, color, rounded and shadow follow the kit, and the defaults live in the split-button config. An action color is separate: danger, warning, success, or a palette name like amber.
blade 
<neura::split-button size="xs" label="Merge" :actions="$actions" />

<neura::split-button size="md" variant="outline" color="secondary" label="Export" :actions="$actions" />

<neura::split-button size="lg" color="danger" variant="soft" rounded="full" label="Delete" :actions="$actions" />

Confirmation

The main click can swap the label in place, then return. Choosing an alternative replaces the label for good.
blade 
<neura::split-button
    label="Copy page"
    method="copyPage"
    icon="clipboard-document"
    done-label="Copied"
    reset-after="1600"
    :actions="[
        ['label' => 'Copy link', 'method' => 'copyLink', 'icon' => 'clipboard-document-check', 'done-label' => 'Link copied', 'reset-after' => 1600],
    ]"
/>