Split Button

A Split Button combines a primary action Button with secondary actions in an Overflow Menu.

Anatomy

Item	Name	Description	Component	Optional
1	Button	When clicked, it triggers the main action. It can use any Button variant that is also supported by the Dropdown Button.	Button Dropdown Button
2	Leading Icon	A decorative icon that clarifies the action and calls attention to the Button. Don’t use it to show the chevron_up/_down.	Icon	Yes
3	Button label	Text describing the main action.
4	Dropdown Button	When clicked, it shows/hides the Overflow Menu. It can use any Dropdown Button variant that is also supported by the Button.	Dropdown Button
5	Trailing Icon	Displays the chevron_up/_down icon, indicating additional actions will be revealed when interacting with the component.	Icon
6	Dropdown List Item	Represents the secondary actions.
7	Overflow Menu	A popup list containing the secondary action options that appears when interacting with the Button.	Overflow Menu

Variants

Split Button / Style / Variant / Primary

Split Button / Style / Variant / Tertiary

Item	Variant	Usage
1	Primary	They should only appear once per screen (not including the App bar)
2	Secondary	For secondary actions on each page.
3	Tertiary	For less prominent, and sometimes independent, actions. Tertiary Split Buttons can be used in isolation or paired with a Primary Button when there are multiple calls to action.

Since the Split Button is composed of both a Button and a Icon Button, their states operate independently. To modify the state, select the nested button and change it in the properties panel.