Split Button
A button component that combines a primary action with a dropdown menu for additional actions.
1import { 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.
Main Action
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 |
| 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.
On this page