Split button
A split button pairs a primary action with a menu of related actions.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { SplitButton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | Two buttons. The first is the main action. The second opens a menu of related actions. |
| appearance | 'default' | 'primary' | 'subtle' | 'warning' | 'danger' | 'discovery' | 'link' | 'default' | Applies to both halves, so they look like one control. |
| spacing | 'default' | 'compact' | None | Compact for a dense row. |
Accessibility
What the component does for you, and what it needs from you.
- The two halves are separate buttons, so each one gets focus and has its own name.
- The second half shows only an arrow, so give it a name that says what it opens.
- The divider between the halves uses the inverse colour on the bold background, so it stays visible in both themes.