Geist Design System

Split Button

A button that offers a primary interaction coupled with a dropdown menu offering additional actions.

Default

The button's primary action should be the first item in the dropdown menu.

Menu Alignment

Icon

Best Practices
  • Use a Split Button when one action is the clear default and 1–4 close variants belong next to it, like Deploy paired with Deploy to Preview. For unrelated actions, use a Menu instead.
  • Mirror the primary action as the first item in the dropdown so keyboard users and screen readers get the same options. The visible button label and the first item must match exactly.
  • Restrict the primary type to default or secondary. The API blocks the destructive variants on purpose, since hiding a delete inside a dropdown is a sharp edge.
  • Title Case every menu item label and follow Verb + Noun: Deploy to Production, Promote to Production, Rollback Deployment. Group destructive items at the bottom with a divider.
  • Set menuButtonLabel to a screen-reader sentence that names the action set, like More deploy options. It becomes the aria-label on the dropdown trigger and is the only label a screen reader hears for that button.
  • Default menuAlignment="bottom-start" aligns the menu under the primary button; switch to bottom-end only when the button sits flush with the right edge of its container.