'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Components · Split button
Split button
A leading action with a trailing menu toggle, separated by a 2dp seam and asymmetric inner corners.
Anatomy
- 1
.split-button-rootSeam container holding the two halves. - 2
.split-button-leadingThe action itself. Takes any button emphasis. - 3
.split-button-trailingMenu toggle. Always carries a menu icon. - 4
.split-button-menuSurface the trailing button opens. - 5
.split-button-menu-itemOne option in the menu. - 6
.split-button-trailing-iconMenu chevron, rotated while the menu is open.
Variants
- Label Material also allows an icon, or both.
- Icon and label
Default
When to use
Use a split button when one action is the clear default and a short menu offers closely related alternatives.