Dropdown button

Triggers selection and displays its results.




Storybook failed to load. Please connect to the VPN to access.



                                                          label-text="Dropdown button trigger"

Dropdown trigger button with key


Use the dropdown button to trigger the selection of options and show the selected item. Most commonly, a dropdown button opens a dropdown menu. It can also open a date picker.



Open and close

The button opens the dropdown on click, and closes on click. On click to close, it retains the current selected value, even if the value is null.


Value display

The dropdown button should display the default value of the selection. If unavailable, the button should display a selection hint. If a label is used, it shouldn't be the same as the selection hint text.

The button's displayed value should fit into a single line of text and not break.



The button should adjust its height to fit results of multi-selection (see below).


Do's and dont's

  • Use an icon when it helps convey the type of option that is selected.
  • Don't use multiple properties in a single dropdown button, eg. key and icon.




dropdown type plain

The default button variant, can be used in most contexts, particularly with plain dropdown menus.


With icon

dropdown type icon

The default button variant, can be used in most contexts, particularly with plain dropdown menus.

Used when triggering a special type of selection (e.g., a date picker), or to differentiate between two different select types (e.g., page vs user segments).


With key

dropdown type key

Used exclusively for language dropdowns.



Multi-select dropdown

Used to display the result of multiple selection in a dropdown menu. Each of the selected elements can be deleted independently, without opening the dropdown menu.



The dropdown button comes in a single size.

Minimum dropdown button spacing

Minimum dropdown button spacing

Dropdown button and menu spacing

Dropdown button and menu spacing