# Split Button

> A main action with a menu of alternatives.

## Examples

### With a menu

Pass the menu's trigger `attrs` to `trigger-attrs`.

```vue
<script setup lang="ts">
const toast = useToast();
const options = [
  { label: "Save as draft", value: "draft" },
  { label: "Save and publish", value: "publish" },
  { label: "Save a copy", value: "copy" },
];
</script>

<template>
  <UiMenu :items="options" align="end" @select="(value) => toast.success(`Saved (${value})`)">
    <template #trigger="{ attrs }">
      <UiSplitButton
        variant="primary"
        menu-label="More save options"
        :trigger-attrs="attrs"
        @action="toast.success('Saved')"
      >
        Save
      </UiSplitButton>
    </template>
  </UiMenu>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `menuLabel` (required) | `string` | — | Accessible name for the toggle half, e.g. "More save options". |
| `triggerAttrs` | `Record<string, unknown>` | — | The `attrs` from a `<Menu>` or `<Popover>` trigger slot, bound to the toggle half. |
| `variant` | `"danger" \| "ghost" \| "primary" \| "secondary" \| "solid"` | `"secondary"` | Style hook, exposed as `data-button-variant` on both halves. |
| `size` | `"medium" \| "small"` | `"medium"` | Size hook, exposed as `data-button-size` on both halves. |
| `disabled` | `boolean` | `false` | Disables both halves. |

| Event | Payload | Description |
| --- | --- | --- |
| `action` | `[]` | The main half was pressed. |
| `toggle` | `[]` | The toggle half was pressed. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | Main action label. |
| `caret` | `{ open: boolean; }` | Replaces the toggle's chevron. |

## Styling

- Parts (`[data-part="…"]`): `split-button`, `button-label`
- State attributes: `data-split-variant`, `data-split-part`, `data-split-open`

## Accessibility

- Name the toggle with `menu-label`.