Skip to main content

The Dropdown component renders a dropdown menu that can appear as a button or hyperlink. Use this component to enable users to select from multiple options in a compact list. This component includes sizing options.

ui-extensions-dropdown-variants

PropTypeDescription
options RequiredObjectThe options included in the dropdown menu. For each option, include:
  • label: the text label for the option.
  • onClick: the function that gets invoked when the option is selected.
variant'primary' (default) | 'secondary' | 'transparent'The type of dropdown button to display. 'primary' and 'secondary' will display a blue and grey button, respectively, while 'transparent' will display a blue hyperlink.
buttonTextStringThe button text.
buttonSize'xs', 'extra-small' | 'sm', 'small' | 'md', 'medium' (default)The size of the button.
disabledBooleanWhen set to true, the dropdown button cannot be focused or clicked. Set to false by default.

Using the variant and buttonSize props, you can set the type of button along with its size.

  • 'primary' buttons with size set to 'xs', 'sm', and 'md' respectively:

    dropdown-buttons-primary

  • 'secondary' buttons with size set to 'xs', 'sm', and 'md' respectively:

    dropdown-buttons-secondary

  • 'transparent' buttons with size set to 'sm' and 'md' respectively:

    dropdown-buttons-transparent