Inputs & Textarea
Pull to Refresh
React Grid Layout
Dropdown allows a user to choose one action from a collection of actions.
The Dropdown menu is triggered by a Dropdown button. Dropdown buttons can use a single button or a split button with a toggle for triggering the menu.
There are two types of dropdowns – single button and split button. Both types can optionally have a leading icon.
Dropdowns can have one of four action styles applied — primary, secondary, tertiary and destructive.
Dropdowns can have either bold or minimal emphasis.
The toggle icon can be replaced with a custom icon when a single icon dropdown button is needed.
By default the dropdown menu is aligned to the bottom left of the dropdown button when opened. Alternate placements are available depending on the needs of the design and are shown below. Additionally, the menu can be set to automatically adjust position to avoid being truncated by the browser or container edge.
The individual dropdown has four possible states — enabled, hovered, selected with opened menu, and disabled. The dropdown menu includes all states from Menu.
The split dropdown has six possible states — enabled, hovered left button, hovered activation button, selected left button, selected activation button with opened menu, and disabled. The dropdown menu includes all states from Menu.
Dropdown can be displayed in large, medium and small sizes.