Material Design 3Actions

Split Button

A split button combines a default action with a dropdown menu of additional related actions. It provides quick access to a primary action while offering alternatives.

Overview

Split buttons are composed of two parts: a main action button and a dropdown trigger. The main button performs the default or most recently selected action, while the dropdown allows users to choose alternative actions. This pattern is useful when there are multiple ways to perform a similar action.

Live Preview

Click dropdown to see options

Variants

Filled

Tonal

Outlined

With Icons

States

Enabled

Hovered

Focused

Disabled

Brand Properties

The following table shows Split Button properties with Material Design 3 defaults and brand-specific values.

Property	Type	Material Default	HoB Value	TAE Value
Button Height	Dimension	`40px`	`44px`	`52px`
Corner Radius	Dimension	`20px (full)`	`9999px (pill)`	`9999px (pill)`
Main Button Padding	Dimension	`12px 24px`	`12px 24px`	`16px 20px`
Dropdown Button Width	Dimension	`40px`	`36px`	`40px`
Divider Width	Dimension	`1px`	`1px`	`1px`
Divider Color	Color	`white 20%`	`white 20%`	`white 20%`
Filled Background	Color	`#6750A4`	`#038012`	`#1A5129`
Filled Text Color	Color	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
Hover Background	Color	`#7965AF`	`#195129`	`#5F982F`
Dropdown Icon Size	Dimension	`18px`	`16px`	`18px`
Menu Corner Radius	Dimension	`12px`	`12px`	`12px`
Menu Shadow	Shadow	`Level 2 (3dp)`	`0 4px 6px rgba(0,0,0,0.1)`	`0 4px 6px rgba(0,0,0,0.1)`
Menu Item Height	Dimension	`48px`	`44px`	`48px`
Menu Item Padding	Dimension	`0 16px`	`0 16px`	`0 16px`
Menu Item Hover	Color	`8% black`	`#F5F5F5`	`#F5F5F5`
Font Family	Font	`Roboto`	`Open Sans`	`Open Sans`
Font Size	Font Size	`14px`	`14px`	`16px`
Font Weight	Font Weight	`500`	`500`	`600`
Disabled Opacity	Percentage	`38%`	`50%`	`50%`

Accessibility

Use aria-haspopup="menu" on dropdown trigger
Use aria-expanded to indicate dropdown state
Support keyboard navigation in dropdown menu
Escape key should close dropdown and return focus to trigger
Enter/Space on main button should perform default action
Provide clear visual separation between main action and dropdown

Do's and Don'ts

Do

Use for actions with multiple variants
Show most common action as default
Keep menu options related to the main action
Remember user's last selected option when appropriate

Don't

Use for unrelated actions
Include more than 5-7 menu items
Mix destructive with constructive actions
Use when a single button would suffice

Related Components

Material Button - Standard action buttons
Button Group - Multiple related buttons
Menu - Dropdown menu component
Select - Form selection component