Button dropdowns

Menu sizes

The button dropdown menus come in three sizes or widths. They are triggered by the dropdown button which comes in all the same styles and sizes as the Button component.

Usage examples

User experience

The Button dropdown is a highly configurable component and is useful if space is at a premium. Triggered on click/tap it can hold links, switches, checkboxes etc. Sub headings can also be used to separate content in the dropdown.

Use a button dropdown as a way for your user to choose from a list of actions.

Although a button dropdown saves on screen space it does mean the action you want the user to perform is hidden behind an interaction ie a button dropdown. Where possible, surface actions and choices at the page or screen level for discoverability and faster completion of tasks.

Visual design

The button used to trigger the button dropdown menu can use any of the styles or sizes available within the Button component.

Where is this available?