Implement split button component per M3 spec

[Copilot]

Adds split button component following Material Design 3 specifications. Split buttons combine a primary action with a menu of related actions.

Implementation

• Component structure: Leading action button + trailing menu button with 2dp divider
• Variants: Elevated, filled, tonal, outlined
• Sizes: XS (24px), S (32px), M (40px), L (48px), XL (56px)
• State handling: Inner corner radius transitions on hover/focus/pressed, menu selected state
• Optical centering: Menu icon offsets per size (-1dp for XS/S, -2dp for M, -3dp for L, -6dp for XL)
• Accessibility: ARIA attributes, keyboard navigation, proper disabled states

Usage

import { SplitButton } from 'soda-material'
import Icon from '@mdi/react'
import { mdiContentSave } from '@mdi/js'

<SplitButton
  variant="filled"
  size="M"
  icon={<Icon path={mdiContentSave} size="20px" />}
  label="Save"
  onClick={handleSave}
  onMenuClick={toggleMenu}
  menuSelected={isMenuOpen}
/>

Screenshots

All variants

All sizes

With icon

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Split buttons</issue_title>
<issue_description># Split buttons
Split buttons open a menu to give people more options related to an action

• Use to show an action with a menu of related actions
• Same size range as buttons and icon buttons: XS, S, M, L, XL

Specs: https://m3.material.io/components/split-button/specs

Types

Type	Original M3	M3 Expressive
Split button	--	Available

---

Configurations

1. Color configurations: Elevated, filled, tonal, outlined
2. Size configurations: XS, S, M, L, XL

Category	Configuration	Original M3	M3 Expressive
Size	XS, S, M, L, XL	--	Available
Color	Elevated, filled, tonal, outlined	--	Available

---

Tokens & specs

Use the table's menu to select a token set. Split button token sets are organized by size. Learn about design tokens

---

Anatomy

1. Leading button
2. Icon
3. Label text
4. Trailing button

The leading button in split buttons can have an icon, label text, or both. The trailing button should always have a menu icon.

1. Label + icon
2. Label
3. Icon

---

Color

Color values are implemented through design tokens. Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code. More on tokens.

Split buttons use the same color schemes as standard buttons. More on buttons. However, unlike toggle buttons, the split button color doesn’t change when selected—only a state layer is applied.

Split buttons use the same colors and state layers as buttons, shown in the following token module. Go to buttons for more details.

A: Unselected, B: Selected trailing icon

1. Elevated
2. Filled
3. Tonal
4. Outlined

---

States

States are visual representations used to communicate the status of a component or an interactive element. More on states

Split button states use the same colors and state layers as buttons and icon buttons. Go to those specs for details.

Leading button shape

The inner corners change shape for hovered, focused, and pressed states.

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed, pressed with focus

Trailing button shape

The inner corners change shape for hovered, focused, and pressed states, and the icon becomes centered when selected.

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed, pressed with focus
6. Selected, selected with focus

---

Measurements

Text and icons are optically centered when the buttons are asymmetrical. They’re centered normally when symmetrical.

Menu icon offset when unselected:

1. XS: -1dp from center
2. S: -1dp from center
3. M: -2dp from center
4. L: -3dp from center
5. XL: -6dp from center

The inner corner radius changes depending on button sizing. The space should always be 2dp.

![Inner padding and inner corner measurements of the...

• Fixes Split buttons #9

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/add-split-button-component

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}