Nav open / close arrow

Styles

Using this Component

Default action buttons should be used when there is one default action, with multiple alternative actions available. The style of a default action button should reflect the significance of the featured action, not those shown in the menu.


Styles

1. Primary

For a highly emphasized 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 actions. There can be multiple secondary buttons in a section or button group, unlike primary buttons.

Action Options

The default action should be either be the most likely choice from among all options, or an action that is promoted to encourage certain user behavior. Alternative actions should be substitutes for the default action. Dissimilar actions should not be placed within the menu.


Compatibility

Default Action Buttons can be used within other components, for example, appearing on UIHeaders, or in UIPlatformTables.


Alternatives

When all options equally likely, use a UIDropdownAction. For buttons that don’t require a triggering a menu, use UIButton.

Structure

1. Default Action

The left section of the button is the default action.  

2. Default Action Text Label

Dropdown buttons are labeled with a single line of text, centered within the default action area.

3. Dropdown Trigger

The right section of the default action button triggers the dropdown menu when clicked. It contains an icon indicator to signal that the action will trigger a dropdown menu.

4. Dropdown Menu

A dropdown menu holds the alternate actions that can be selected.

Behavior

A default action button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed.


Clickable Area

The default action and the menu trigger areas are separate, fully clickable areas. The default action and the dropdown trigger may be independently disabled. The dropdown trigger should only be disabled when all actions within the menu are also 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

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code