Default Action Button
UIDefaultActionMenu
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
Playground Coming Soon!
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.