Skip to content

feat: add SplitButton component#4998

Open
draggie wants to merge 1 commit into
callstack:mainfrom
draggie:feat/split-button
Open

feat: add SplitButton component#4998
draggie wants to merge 1 commit into
callstack:mainfrom
draggie:feat/split-button

Conversation

@draggie

@draggie draggie commented Jun 15, 2026

Copy link
Copy Markdown

Motivation

Implements the new Material Design 3 SplitButton component as part of the v6 component modernization work.

The component provides a primary leading action and a separate trailing action for contextual options. It reuses the modernized Button API direction
from #4928/#4943: explicit label/icon props, MD3 mode names (filled, tonal, elevated, outlined), derived ripple/state-layer colors,
extracted component tokens, size metrics, shape tokens, disabled/loading states, and separate accessibility/press handlers for each button segment.

This also adds the component to the public exports, documentation generation config, theme color docs data, and the example app. The example includes a
Menu-based playground, mode showcase, loading/disabled controls, and custom color/label styling.

Related issue

Closes #4986

Related to #4928 and #4943

Test plan

  • yarn lint-no-fix
    • Passes with one existing unrelated warning in src/components/__tests__/TextInput.test.tsx.
  • yarn typescript
  • yarn test --watchman=false
  • yarn docs build

Manual verification in the example app:

  • Open the SplitButton example screen.
  • In the playground, tap the leading Send action and trailing menu action separately.
  • Verify the trailing menu opens below the SplitButton anchor and does not cover the button.
  • Toggle Disabled and verify both press targets are disabled and styled correctly.
  • Toggle Loading and verify the leading icon is replaced with a spinner.
  • Review all modes: filled, tonal, elevated, and outlined.
  • Review custom color and custom label style examples.
Screenshot_1781525547 Simulator Screenshot - iPhone 17 - 2026-06-15 at 14 15 22

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add Split Button

1 participant