Split Button

Split button allows users to have a primary action along with the option to choose from a list of nested related secondary actions.

On this page

Import

Primary With Icon

Loading preview
Open in Storybook

Primary Without Icon

Loading preview
Open in Storybook

Secondary With Icon

Loading preview
Open in Storybook

Secondary Without Icon

Loading preview
Open in Storybook

Props

Split Button Props

NameDescriptionDefault
labelOverrides

Overrides for labels that have been defaulted in the component.

SplitButtonLabelOverrides		-
variant

Determines the style of the button.

"primary" | "secondary"		primary
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
label*

The text content to associate with the main action. Also used as the default accessible label for the SplitButton group.

string		-
id*

Unique identifier for the SplitButton menu.

string		-
children*

The nested actions to include. Must be an instance of SplitButtonAction.

ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]		-
onClick

The event handler for click events on button, disabled for disabled buttons

MouseEventHandler<HTMLButtonElement>		-
isLoading

If true, shows loading button with spinner

boolean		-
iconPosition

Place icon before or after text

"start" | "end"		-
icon

Custom icon displayed in notification

ReactNode		-
reactlytics
ReactlyticsProp		-
groupScreenReaderLabel

The accessible label for the SplitButton group.

string		-
defaultIsOpen

Determines if the split button is open by default (uncontrolled mode).

boolean		-
isOpen

Determines if the split button is currently open (controlled mode).

boolean		-
onIsOpenChange

A callback for when the open state is changed (controlled mode).

((isOpen: boolean) => void)		-
menuProps

Props to spread onto Menu component

Omit<MenuProps, "disabled" | "aria-disabled" | "label" | "id" | "children" | "defaultIsOpen" | "isOpen" | "onIsOpenChange" | "customTrigger">		-

Split Button Action Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
children*

Child elements of the MenuItem, typically text content

ReactNode		-
onClick

Callback function to be called when the MenuItem is clicked

MouseEventHandler<HTMLButtonElement>		-
reactlytics
ReactlyticsProp		-
icon

Icon to be displayed for the MenuItem

ReactElement<any, string | JSXElementConstructor<any>>		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.