Split Button

A button component that combines a primary action with a dropdown menu for additional actions.

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.

import { SplitButton, MenuItem } from '@cerberus/react'
import { Save, Download } from '@carbon/icons-react'

function StaticPreview() {
  return (
    <SplitButton>
      <MenuItem value="save">
        <Save size={16} />
        Save
      </MenuItem>
      <MenuItem value="save_as">
        <Save size={16} />
        Save As...
      </MenuItem>
      <MenuItem value="export">
        <Download size={16} />
        Export
      </MenuItem>
    </SplitButton>
  )
}

Main Action

The SplitButton accepts all standard Button props for the primary action button, allowing you to customize its behavior.

import { SplitButton, MenuItem } from '@cerberus/react'
import { Save, Download } from '@carbon/icons-react'

function BasicDemo() {
  return (
    <SplitButton actionText="Main Action" pending>
      <MenuItem value="save">
        <Save size={16} />
        Save
      </MenuItem>
      <MenuItem value="save_as">
        <Save size={16} />
        Save As...
      </MenuItem>
      <MenuItem value="export">
        <Download size={16} />
        Export
      </MenuItem>
    </SplitButton>
  )
}

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.

On this page

Edit this page on Github