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


                                                        
                                                        
                                                            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>

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