Preview Updated 2026-05-10

Split button

A primary button + dropdown arrow combo for related actions.

Basic usage

The main button fires click; the arrow opens the dropdown; selecting an item fires select(value, item).

src/App.vue vue

<CfSplitButton :items="items" @click="save" @select="onPick">
Save
</CfSplitButton>

src/App.tsx tsx

<CfSplitButton items={items} onClick={save} onSelect={(v) => onPick(v)}>
Save
</CfSplitButton>

Sizes

Three sizes follow the --control-h token.

src/App.vue vue

<CfSplitButton size="sm" :items="items">Small</CfSplitButton>
<CfSplitButton size="md" :items="items">Medium</CfSplitButton>
<CfSplitButton size="lg" :items="items">Large</CfSplitButton>

src/App.tsx tsx

<CfSplitButton size="sm" items={items}>Small</CfSplitButton>
<CfSplitButton size="md" items={items}>Medium</CfSplitButton>
<CfSplitButton size="lg" items={items}>Large</CfSplitButton>

API

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'danger'`	`'primary'`	Reuses Button variants
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`items`	`SplitButtonItem[]`	—	Dropdown items `{ label, value, disabled?, danger? }`
`disabled` / `loading`	`boolean`	`false`

Events: click (main button), select(value, item) (dropdown item).