Button dropdowns

Usage

Button Dropdowns are used when there is a set of closely related actions available to the user, or as a solution to consolidate the number of actions that appear on the screen. Clicking the Button Dropdown opens an option list where the user can select an action or shift focus off the button to close the list. They are commonly seen within tables due to space restrictions.

When to use Button Dropdowns

• When three or more actions are available
• When space is limited - such as within a table

Anatomy

A Button Dropdown consists of a Button and a list of actions.

1. Button: See Button documentation for more details on button styles
2. Chevron: Text buttons contain a chevron to indicate that there are options available
3. Action list: A grouping of actions, appears after the button is clicked
4. Action: Clicking will execute the action

The width of the action list is, at minimum, 150px wide. The width of the list can expand, maintaining 15px padding on each side, should one of the options exceeds the 150px minimum.

See the Design specs for detailed sizing and spacing information

Types

Standard Button Dropdown

• Button with a chevron icon to the right of the text label
• Can be primary, secondary or link styles (see Buttons for details on types)
• Once active, a dropdown opens to display options

Icon Button Dropdown

• Icon button, (most commonly the more icon)
• Can be primary, secondary or link styles
• Once active, a dropdown opens to display options

Option list with icons

• Pair icons with text labels for clear and easy recognition of actions in the dropdown
• Icons appear to the left of the text label within the dropdown

States

Buttons Dropdowns follow Button states with the exception of the selected state, which opens the dropdown to display the list of options available to the user.

The options dropdown also has normal, hover and disabled states as shown below.

Responsiveness

Users on mobile and touch devices should have a larger touchpoint than desktop users. The touch target increases from 36px to 42px for users on mobile or touch devices.

For more information about mobile and touch device breakpoints, see the breakpoints table.

Alternate considerations

• Buttons should be used when there are 2 or fewer actions available
• Buttons or Button Groups should be used when choices should be immediately visible to users
• Dropdown Select should be used if the user is making a selection instead of executing an action

Behavior

• Depending on the placement of the Button Dropdown and the space available, the option list can appear either left-aligned or right-aligned.
• The option list should always open below the button.
• The option list should appear above any components in z-space. It should not push items downwards on the page when open.
• The option list should not be confined to the container in which it was triggered, meaning it can go over the edge of the card or table in which it was triggered.