Nav open / close arrow

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

Last Updated

October 9, 2019

Coming soon...

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.