Guidelines
When to use
- Multiple actions with common result: The Dropdown Button is most often used to optimize space when you need to display multiple actions that have similar effects on the system, such as creating a new entity: a new user, reservation, or task.
- Action with multiple variants: The Dropdown Button is also a preferable solution for actions with multiple variants, such as paying an invoice by card, cash, or bank transfer.
-
Multiple actions in a condensed space: When there is little space to display all the necessary actions, such as in tables or cards, a Dropdown Button with more icon (three vertically aligned dots) is used. This is a common pattern across many digital products and platforms, and therefore, we trust that users will understand its meaning in our product.
When not to use
- Singular action: Dropdown buttons should only be used when two or more actions are grouped. If the number of actions changes dynamically to a single action, ensure that the regular Button component is used instead.
- Enough space to show all actions: Grouping actions reduces discoverability and forces the user to click before seeing all available options. Therefore, it is best to use the Dropdown Button only when displaying all actions separately would significantly impact interface clarity or alignment.
Types
A Dropdown Button can be used with either a Button or an Icon Button, depending on the design context and the user's needs. An Icon Button is often used inside other composable components like Tables, Cards, or Side Panels to offer multiple actions in a space-efficient manner. It is also used alongside other actionable elements in the Page’s action bar or the main App bar.
When the Icon Button is used, it’s important to verify that the icon is universally understood and users can guess its meaning without needing to hover for additional context.
Variants
The Dropdown Button is composed of a standard Button component, meaning it inherits some of its properties, including the Variant. This enables you to choose between Primary, Secondary, Tertiary or Ghost variants to match the importance and prominence of the actions in your design. The Danger variant is not enabled for the Dropdown Button, as you should never group multiple potentially destructive actions together.
Please refer to the Button's hierarchy guidelines for more details on selecting the correct variant.
Wide property
By default, the width of the Button and Overflow Menu depends on the length of their content. When the wide property is enabled, the width of those elements is set to fill 100% of the parent container. It is mainly used on mobile breakpoints or when nested in another component.
Alignment
By default, the Overflow Menu is placed below and left-aligned with the Button. If the component is placed near the window’s edge, it will automatically adjust the elements’ alignment to ensure they fit the screen.
Dropdown Button VS Button
While the Dropdown Button seems similar to a regular Button, they differ in their purposes and the effect of clicking each:
- Button: The purpose of a Button is to trigger an action or perform an event. When a user clicks on the Button, it immediately triggers the specified action.
- Dropdown Button: The Dropdown Button is designed to save space when multiple actions need to be offered in the UI. Clicking on it does not trigger an action; instead, it opens an Overflow Menu with a list of all available actions. Clicking on one of those List Items triggers the desired action.
Dropdown Button VS Split Button
The two components allow for saving space when multiple actions need to be offered in the UI. When deciding which one to choose, you need to consider the hierarchy of the actions:
- Split button: It acts as two distinct buttons in one: a regular Button, which triggers a main action, and a Dropdown Icon Button, which opens the Overflow Menu with a list of related alternative actions.
- Dropdown Button: The main action cannot be distinguished; all alternatives are at the same hierarchy level.
Behaviors
Mouse interactions
Unlike the standard Button, clicking the Dropdown Button does not trigger an action; instead, it opens the Overflow Menu.
- Clicking the Button in the default state opens the Overflow Menu. It can be closed by clicking the Button again or clicking outside of the component.
-
Clicking one of the List Items in the Overflow menu will trigger the action and close the Overflow Menu.
Keyboard interactions
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the Button |
|
Space or Enter |
Opens the Overflow Menu and sets focus on the first List Item |
|
Up or Down arrows |
Moves between the Overflow Menu List Items |
|
Space or Enter |
Selects the List Item and triggers the action |
|
Escape |
Closes the Overflow Menu |
Content
Main elements
|
Element |
Description |
|---|---|
|
Button Label |
Button labels follow the same guidelines as the Button content guidelines |
|
Leading Icon |
- |
|
Overflow Menu List Items |
If the List Item’s text overflows the Menu’s container, it should be broken into the next line. |
Tone
All Dropdown buttons should be written in an actionable tone. Our goal is to ensure that the user knows exactly what will happen when it is clicked, and the content should guide them.
Do
- Organize the Overflow Menu List Items logically: To ensure the best usability place the most frequently used options at the top. If the priority cannot be determined, use alphabetical order.
- Group Overflow Menu List Items: If you group more actions, try to group them according to their purpose, topic, or functional criteria.
Do not
- Replace the Trailing Icon: The Trailing Icon in the Dropdown Button should only indicate the expanding feature which we consistently use across our products with the chevron_down or chevron_up icons.
- Use the Leading Icon to display the chevron: To provide a consistent experience to our users, the Chevron icon should always be displayed on the right side of the Button, using the Trailing Icon element.
- Try not to include more than 5 actions: To maintain the component's usability, including more than 5 actions should be avoided. If necessary, try to group them according to their purpose or topic.
Layout
Footer usage
The Dropdown can include a footer if needed, but it should be used with caution. There are two main types of actions:
- Confirmation: Use a Primary Button aligned to the right (e.g., "Apply"). The footer should always be visible and stick to the bottom if the content overflows. A clear/reset action may accompany the button, but it should be left-aligned.
- List-related: Use a more subtle option, like the Ghost Button, aligned to the left, following the list’s reading direction. These actions should blend with the list and don’t need to stick to the bottom.