Dropdown | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise
ui-extensions-dropdown-variants
import { Dropdown } from '@hubspot/ui-extensions'; const Extension = () => { const ddOptions = [ { label: 'Clone', onClick: () => console.log({ message: 'Clone group' }) }, { label: 'Delete', onClick: () => console.log({ message: 'Delete group' }) } ] return ( <Dropdown options={ddOptions} variant="primary" buttonSize="md" buttonText="More" /> ); };
Prop Type Description
options   Required  Object The 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.
buttonText  String The button text.
buttonSize  'xs', 'extra-small' | 'sm', 'small' | 'md', 'medium' (default) The size of the button.

Variants

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

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.