Using this Component
Dropdown buttons should be used to let users select from multiple different similar actions.
For a highly emphasized (groups of) actions within a page or section. Only one primary button should appear per button group. Avoid using more than one per page where possible.
Used for subordinate (groups of) actions. There can be multiple secondary buttons in a section or button group, unlike primary buttons.
The action options should be substitutes with roughly equal expected likelihood of being selected. Do not use dropdown buttons as a way to access “Misc.” or “Other” actions that are dissimilar from each other.
Button text is centered within a rounded rectangle container. The width of the button is determined by the length of the text label.
2. Text Label + Ellipsis
Dropdown buttons are labeled with a single line of text ending in an ellipsis (…). The ellipsis signals to the user that there will be another step before an action is initiated, in this case, a selection from a menu.
3. Dropdown Indicator
Each dropdown button has an icon indicator to signal that the action will trigger a dropdown menu.
4. Dropdown Menu
A dropdown menu holds multiple actions that can be selected.
A dropdown button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed.
The entire dropdown button is clickable and triggers the dropdown menu to open. The dropdown button is only disabled when all action within the menu are also disabled. Menu options may be independently disabled.
A button should be sized to fit the text of its label, not the other way around. Button labels should never be truncated.
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.