Import
import { SplitButton, MenuItem } from '@cerberus/react'Basic 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.
Size
You can customize the size of the SplitButton using the size prop.
Preview
This feature is experimental and may change in future releases. To use this feature upgrade to the latest next version
Shape
You can customize the shape of the SplitButton using the shape prop.
Preview
This feature is experimental and may change in future releases. To use this feature upgrade to the latest next version
Usage
You can customize the usage of the SplitButton using the usage prop.
Preview
This feature is experimental and may change in future releases. To use this feature upgrade to the latest next version
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 along with the same props as the Button component:
| 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.