Preview
Code
<usln-dropdown-button
theme="light"
key-text="EN"
label-text="Dropdown button trigger"
is-disabled="false"
is-error="false"
>
</usln-dropdown-button>
Dropdown trigger button with key
Guidelines
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.
Behaviour
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.
Multi-selection
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.
Variants
Plain
The default button variant, can be used in most contexts, particularly with plain dropdown menus.
With 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
Used exclusively for language dropdowns.
Multiselection
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.
Sizes
L
The dropdown button comes in a single size.
Minimum dropdown button spacing
Dropdown button and menu spacing