Dropdown Button

A Dropdown Button groups multiple actions in one triggering UI element, optimizing the space in condensed areas or action-heavy pages.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example

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


                                                        
                                                        
                                                            import { Button, ListItem } from '@optimus-web/core';
                                                        
                                                        <DropDownButton label="Take an action" size="medium" variant="primary">
                                                            <ListItem dense primaryText="First" value={1} />
                                                            <ListItem dense primaryText="Second" value={2} />
                                                            <ListItem dense primaryText="Third" value={3} />
                                                        </DropDownButton>

API

Name	Description	Type	Default
disabled?	Allows the button to be disabled	boolean	false
label?	Text on the button	React.ReactNode
portalContainerId?	Ability to give the Menu that holds the ListItems a unique container ID	string
size?	"small", "medium", "large", "extraLarge"	Size	"medium"
variant?	"destructive", "ghost", "primary", "secondary", "tertiary"	DropDownButtonVariant	"tertiary"
wide?	Gives the button a width of 100%	boolean	false

A note about legacy IconMenu

We use to provide a component named IconMenu, which basically was a dropdown button with some specific configuration. We decided to remove that component in order to slim down our component collection and we migrated all usages in the process.

Just removing the label and providing an icon, will render a similar UI. You can try that in our Storybook