Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Button/Icon Button |
On click, it shows/hides the Overflow Menu. It can use any variant of the Button or Icon Button. |
|
|
|
2 |
Leading Icon |
A decorative icon that clarifies the action and calls attention to the Button. Don’t use it to show the chevron_up/_down. |
Yes |
|
|
3 |
Button label* |
The name of the group of actions. |
|
|
|
4 |
Trailing Icon* |
Displays the chevron_up/_down icon. It indicates to the user that more actions will be revealed when interacting with the component. |
|
|
|
5 |
Overflow Menu |
A popup list containing the action options is displayed when interacting with the button. |
|
|
|
6 |
Dropdown List Item |
An element that the user needs to click to trigger the action. |
|
|
*Those elements are not rendered when the Icon Button is used instead of the Button.
Specification and properties
Sizing and spacing
As the Dropdown Button is essentially a Button/Icon Button combined with an Overflow Menu, the only dimension it controls is the spacing between these two elements. All the remaining dimensions are inherited from those nested components. Please refer to the components’ style pages for the exact specifications.
By default, the width of the Button and Overflow Menu depends on the length of the content they contain. When the wide property is enabled, the width of those elements is set to fill 100% of the parent container instead. (Icon Button does not support the wide property).
|
Item |
Value |
Token |
|---|---|---|
|
Item spacing |
8px |
spacing.100 |
States
By default, the Dropdown Button is displayed in a closed state when only the nested Button component is visible. Upon interaction, the state changes to opened, and an Overflow Menu is shown.
|
Item |
State |
Description |
|---|---|---|
|
1 |
Closed |
The default state in which only the Button is visible to the user. |
|
2 |
Opened |
When the Button is clicked, an Overflow Menu is displayed. |
The remaining interactive states are inherited from the nested Button component. For the exact specifications, please refer to the component’s style page.
To display the Button in an interactive state (e.g. hover, active), locate the corresponding Button component layer and adjust the State property.