Import
import { SplitButton, MenuItem } from '@cerberus/react'Usage
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.
Pending
The SplitButton accepts all standard Button props for the primary action button, allowing you to customize its behavior.
Primitives
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 |
API
SplitButton
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:
- ButtonGroup for layout
- Button for the primary action
- Menu for the dropdown functionality
- IconButton for the dropdown trigger
MenuItem
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.
Note
The SplitButton component uses an attached ButtonGroup layout to ensure the primary button and dropdown trigger appear as a single unified control.