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.
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.
Used for subordinate actions. There can be multiple secondary buttons in a section or button group, unlike primary buttons.
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.
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.
A default action button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed.
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.
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.