Components › Forms & input › Button › Split button

Split button

canon

Main action plus a chevron that opens a menu of related variants of the same action.

Approved by the owner 26 Sep 2026 („za me ok . schvaleno“, preview button-compact-split) and delivered in acrm !3903. Reverses review ACRM-81 (no use case then) on the owner’s request; pattern Atlassian Split button. Menu items shared with Menu button (one menu in the family). First adopter: mail „Odeslat hned / s odkladem“. Registry repaired 17 Oct 2026 (review F4/F11): attached css button.css.

Used in 4 files · 3 areas · 5× — components/mail, components/setkani, pages/komunikace

@acrm/ui <SplitButton>.acrm-split .acrm-split-more .acrm-split.compactSourceStory
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Tab reaches the main action and the chevron as two separate stops; Enter / Space activates each.
  • In the open menu the Popover handles Escape (close, focus back to the chevron).

ARIA

  • The chevron has no text: moreLabel is required and becomes its aria-label and the menu's aria-label (e.g. „Další možnosti odeslání").
  • The chevron carries aria-haspopup="menu" and aria-expanded; menu rows are role="menuitem".

Focus

  • Both parts draw the foundation focus ring; the focused part is lifted above its neighbour so the ring is not clipped by the shared border.

Contrast

  • Same tokens as Button; the primary divider is --fg-on-accent mixed into --accent-press, visible without being a second accent.

Known limits

  • Arrow-key navigation inside the menu follows the shared Popover behaviour, not a dedicated menu keyboard model.

Source: docs/button/split-button.a11y.md · GitLab