Buttons
Split button
Keep the common outcome immediate while exposing nearby alternatives.Anatomy
Callouts are measured from the live split button below.
- 1
Container
The connected wrapper joining the two buttons into one pill and clipping their shared edge.
- 2
Primary action
The main button — its content comes from the default slot and it emits click.
- 3
Dropdown trigger
The narrow button that opens the menu of alternatives and emits dropdown.
- 4
Menu
The list built from the items prop; choosing one emits select. It teleports on open, so it is not shown at rest.
Contract: one primary action plus alternatives
A split button pairs a default action with a short menu of related choices. It carries data, not behavior.
Primary from the default slot
The default slot renders the primary label; `@click` fires when it is pressed.
Alternatives via the items prop
`items` is an array of { label, icon?, value? }; the dropdown trigger opens them and `@dropdown` fires.
Selection is emitted
Choosing a menu entry emits `@select` with the item — handle the action in your view, keep items as pure data.
Interactive configuration
Adjust the primary props and choose coherent slot presets.
Props stay atomic
Independent primitive values use individual controls.
Slots use presets
Related slot combinations switch as one preset without invalid states.
States
Both halves inherit the button state scheme; the trigger reflects whether the menu is open.
Hover / pressed
Each half shows its own state layer independently of the other.
Menu open
Activating the trigger opens the alternatives; clicking outside closes them.
Focus-visible
A visible ring marks focus on the action and the trigger separately.
Disabled
disabled removes interaction from both halves at once.
In context
The component is shown in a working composition built from public kit primitives.