# SplitButton

Pairs a primary action with a menu of alternatives.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/SplitButton.tsx)

## Overview

A split button places a primary action beside a menu trigger that opens alternative actions.

Make the primary action the most common choice, with the alternatives in the menu.

## Examples

### Basic

```tsx
import { Menu, SplitButton } from '@tempoxyz/ds'

export function Demo() {
  return (
    <SplitButton.Root aria-label="Save">
      <SplitButton.Action>Save</SplitButton.Action>
      <Menu.Root>
        <SplitButton.Trigger aria-label="More save options" />
        <Menu.Popup align="end">
          <Menu.Item>Save as draft</Menu.Item>
          <Menu.Item>Save and close</Menu.Item>
        </Menu.Popup>
      </Menu.Root>
    </SplitButton.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SplitButton/Basic.tsx)

### Variant

Set `variant` on `SplitButton.Root` to `primary`, `secondary`, `negative`, or `text`. It defaults to `primary`.

```tsx
import { Menu, SplitButton, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['primary', 'secondary', 'negative', 'text'] as const).map((variant) => (
        <SplitButton.Root key={variant} variant={variant}>
          <SplitButton.Action>Save</SplitButton.Action>
          <Menu.Root>
            <SplitButton.Trigger aria-label="More save options" />
            <Menu.Popup align="end">
              <Menu.Item>Save as draft</Menu.Item>
              <Menu.Item>Save and close</Menu.Item>
            </Menu.Popup>
          </Menu.Root>
        </SplitButton.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SplitButton/Variant.tsx)

## Guidelines

TODO: Write guidelines for SplitButton.