Available in the OSS Version

Split Button - Overview

Split buttons, also known as split drop down buttons, are useful when you want to provide a default action/command for a button but also need to supply other, secondary options.
- Change shape

- Change color

- Change text alignment

- Change text style

- Change font color

- Change background color
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

If you use Microsoft Office, Windows, or Gmail, you will be familiar with this pattern. Typically it is a command name with an optional icon, followed by a splitter, and then a down arrow. The command that is displayed directly is the default, and if you click that part of the button, it will execute that command, but you can also click the drop down to see alternative commands and select them from the drop down to execute.

Code View

Copy to Clipboard