A button component that combines a primary action with a dropdown menu for additional actions.
import { SplitButton, MenuItem } from '@cerberus/react'The SplitButton component combines a primary action button with a dropdown menu for additional related actions.
It's ideal for situations where you have a primary action that users perform most often, but also want to provide quick access to related secondary actions.
The SplitButton accepts all standard Button props for the primary action button, allowing you to customize its behavior.
The SplitButton component is built using the following primitive components:
| Component | Description |
|---|---|
| ButtonGroup | Groups the primary button and dropdown trigger together |
| Button | The primary action button |
| Menu | The dropdown menu container. Renders within parent context. |
| MenuTrigger | The dropdown trigger (IconButton) |
| MenuContent | The dropdown menu content container |
| MenuItem | Individual menu items within the dropdown |
The SplitButton component accepts the following props:
| Name | Default | Description |
|---|---|---|
| children | MenuItem components to display in the dropdown | |
| actionText | The text for the primary action button |
The SplitButton component internally uses:
Use MenuItem components as children of SplitButton to define the available actions in the dropdown menu. See the Menu documentation for more details on MenuItem props.
On this page