Search

Search components and blocks

Sign in

Split Button

Pro

A primary action joined to a menu of alternatives. Pick an option and the main button relabels with a quick crossfade; the menu unfolds out of the chevron with a morph while the options blur into focus, the selection highlight slides between rows and the check springs in. Needs the Morph Popover.

pnpm dlx shadcn@latest add @ditherui/split-button

Press the main button

Props

optionsreadonly SplitButtonOption[]required
valuestring—
defaultValuestringfirst option
onValueChange(value: string) => void—
onAction(value: string) => voidrequired
variant"default" | "outline" | "secondary""default"
align"start" | "center" | "end""end"
disabledbooleanfalse
size"sm" | "md" | "lg""md"
loadingbooleanfalse
openboolean—
defaultOpenbooleanfalse
onOpenChange(open: boolean) => void—
classNamestring—

When to use the split button

Use it for a primary action with alternatives. Pick an option and the main button relabels with a quick crossfade.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components