Dropdown Buttons
UIDropdownButton
Styles
Using this Component
Dropdown buttons should be used to let users select from multiple different similar actions.
Styles
1. Primary
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.
2. Secondary
Used for subordinate (groups of) actions. There can be multiple secondary buttons in a section or button group, unlike primary buttons.
Action Options
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.
Compatibility
Dropdown buttons can be used within other components, for example, appearing on UIHeaders, or in UIPlatformTables.
Alternatives
When one option is much more likely than the others to be used, use a UIDefaultActionMenu. For buttons that don’t require a triggering a menu, use UIButton.
Structure
1. Container
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.
Behavior
A dropdown button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed.
Clickable Area
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.
Truncation
A button should be sized to fit the text of its label, not the other way around. Button labels should never be truncated.
Related Components
Playground Coming Soon!
Styles
Using this Component
Dropdown buttons should be used to let users select from multiple different similar actions.
Styles
1. Primary
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.
2. Secondary
Used for subordinate (groups of) actions. There can be multiple secondary buttons in a section or button group, unlike primary buttons.
Action Options
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.
Compatibility
Dropdown buttons can be used within other components, for example, appearing on UIHeaders, or in UIPlatformTables.
Alternatives
When one option is much more likely than the others to be used, use a UIDefaultActionMenu. For buttons that don’t require a triggering a menu, use UIButton.
Structure
1. Container
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.
Behavior
A dropdown button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed.
Clickable Area
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.
Truncation
A button should be sized to fit the text of its label, not the other way around. Button labels should never be truncated.