Split Button

A primary action button joined with a dropdown trigger. The left half fires the main action; the right half (chevron) emits a toggle event for you to open a menu or dropdown.

ExamplesCodeUsageChangelog

Basic

Tailwind v4

<script setup>
const open = ref(false)
</script>

<SplitButton :open="open" @click="save" @toggle="open = !open">
  Save
</SplitButton>

Variants

Tailwind v4

<SplitButton variant="primary" @click="save" @toggle="openMenu">Save</SplitButton>
<SplitButton variant="secondary" @click="export" @toggle="openMenu">Export</SplitButton>
<SplitButton variant="danger" @click="delete" @toggle="openMenu">Delete</SplitButton>

Sizes

Tailwind v4

<SplitButton variant="secondary" size="sm" @click="save" @toggle="open = !open">Small</SplitButton>

Loading

Tailwind v4

<SplitButton :loading="saving" @click="save" @toggle="open = !open">
  Save changes
</SplitButton>

Disabled

Tailwind v4

<SplitButton :disabled="!canSave" @click="save" @toggle="open = !open">
  Save
</SplitButton>

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'ghost' | 'danger'	'primary'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Button size
loading	boolean	false	Show spinner, disable both halves
disabled	boolean	false	Disable both halves
open	boolean	false	Controls chevron rotation (pass true when dropdown is open)

Events

Event	Payload	Description
click	MouseEvent	Main button was clicked
toggle	MouseEvent	Chevron button was clicked — open/close your dropdown

Slots

Slot	Description
default	Main action label