Split Button

Split Buttons offer a primary action alongside a suffix trigger for secondary, related actions.

Overview

The catnip-split-button component renders a dual-part button element: a main button that emits the primary click event, and a suffix button that emits suffix-click. Consumers render and control the related action surface, such as a menu, list, or popover, and pass the controlled open state back to the split button for selected suffix styling and aria-expanded.

It supports semantic intent (default, danger), varying sizes (s, m, l), and three appearances (primary, secondary, ghost). It does not support tertiary appearance or purpose="utility", as the shape and mechanics are restricted compared to a standard CatnipButton.

The suffix icon follows open by default: chevron-down when inactive and chevron-up when active. Use suffixInactiveIcon and suffixActiveIcon slots to provide custom Catnip icons, SVGs, or application-owned icon elements. If only one suffix icon slot is provided, that icon is used in both states.

Loading state: An optional loading state (aria-busy + native disabled on both halves) is supported, which visually replaces the main button's content with a spinner and disables both halves of the button.

Live example

Accessibility

• Composed of native <button> elements with disabled mapping directly.
• Implements role="group" with an accessible aria-label describing the group.
• The suffix button implements aria-haspopup and aria-expanded when popup semantics are enabled.
• Use aria-controls to point to the consumer-rendered popup when it is visible.
• The consumer-rendered action surface should provide the appropriate role, labels, keyboard behavior, and focus management for its pattern.
• Close the consumer-rendered surface when the user chooses an item or clicks outside the split-button/menu region.
• Meet contrast requirements for text and icons on the button surface (WCAG AA).