Split Button

A primary action joined to a menu of related ones. The left button behaves like any Button and keeps its props; items describes the menu, including separators, links, destructive entries, and one level of submenu. loading shows a spinner and disables both halves at once.

Installation

Import from the package. Do not run shadcn add in your app.

tsx

import { SplitButton } from "@carsxe/design-system/components/split-button"

Usage

tsx

import { SplitButton } from "@carsxe/design-system/components/split-button"

<SplitButton
  items={[
    { id: "email", label: "Email report", onSelect: emailReport },
    { separator: true },
    { id: "delete", label: "Delete report", destructive: true, onSelect: remove },
  ]}
  onClick={orderReport}
>
  Order report
</SplitButton>

Variants

Sizes

Submenus, links, and disabled items

Loading and disabled

API Reference

Prop	Type	Default
items	SplitButtonItem[]	—
loading	boolean	false
menuLabel	string	"More options"
contentProps	React.ComponentProps<typeof DropdownMenuContent>	—
variant	Button variant	"default"
size	Button size	"default"
onClick	(event) => void	—
disabled	boolean	false