Split Button

A button group which provides a default action with one click while revealing related alternatives through a dropdown menu. Best for when users typically want one action but occasionally need variants.

1import { CopyIcon, FileTextIcon } from "@phosphor-icons/react";2import { Icon } from "@ngrok/mantle/icon";3import { SplitButton } from "@ngrok/mantle/split-button";4 5<SplitButton.Root>6	<SplitButton.PrimaryAction icon={<CopyIcon />}>Copy page</SplitButton.PrimaryAction>7	<SplitButton.MenuTrigger label="Open actions menu" />8	<SplitButton.MenuContent>9		<SplitButton.MenuItem>10			<Icon svg={<CopyIcon />} />11			Copy page12		</SplitButton.MenuItem>13		<SplitButton.MenuItem>14			<Icon svg={<FileTextIcon />} />15			View as Markdown16		</SplitButton.MenuItem>17	</SplitButton.MenuContent>18</SplitButton.Root>;

Composition

Compose the parts of a SplitButton together to build your own:

SplitButton.Root├── SplitButton.PrimaryAction├── SplitButton.MenuTrigger└── SplitButton.MenuContent    └── SplitButton.MenuItem

Polymorphism

When you want to render something else as a SplitButton.MenuItem, you can use the asChild prop to compose. This is useful for rendering links as menu items.

1import { DownloadIcon, FileTextIcon } from "@phosphor-icons/react";2import { Icon } from "@ngrok/mantle/icon";3import { SplitButton } from "@ngrok/mantle/split-button";4 5<SplitButton.Root>6	<SplitButton.PrimaryAction icon={<DownloadIcon />}>Download</SplitButton.PrimaryAction>7	<SplitButton.MenuTrigger label="Open download options" />8	<SplitButton.MenuContent>9		<SplitButton.MenuItem>10			<Icon svg={<DownloadIcon />} />11			Download as PDF12		</SplitButton.MenuItem>13		<SplitButton.MenuItem asChild>14			<a href="https://example.com" target="_blank">15				<Icon svg={<FileTextIcon />} />16				Open in new tab17			</a>18		</SplitButton.MenuItem>19	</SplitButton.MenuContent>20</SplitButton.Root>;

API Reference

SplitButton.Root

A button group which provides a default action with one click while revealing related alternatives through a dropdown menu.

All props from div, plus:

Prop	Type	Description
`dir?`	`"ltr"` \| `"rtl"`	The reading direction of the dropdown menu.
`open?`	`boolean`	The controlled open state of the dropdown menu.
`defaultOpen?`	`boolean`	The open state of the dropdown menu when it is initially rendered.
`onOpenChange?`	`(open: boolean) => void`	Event handler called when the open state of the dropdown changes.
`modal?`	`boolean`	Whether the dropdown menu is modal.

SplitButton.PrimaryAction

The most common action users can trigger with a single click. Renders as a Button with appearance="outlined" and priority="neutral".

All props from Button, except appearance and priority.

Prop	Type	Default	Description
`type?`	`"button"` \| `"submit"` \| `"reset"`	`"button"`	The type attribute of the button.

SplitButton.MenuTrigger

The button that opens the split button dropdown menu. Renders as an IconButton with a caret-down icon that rotates when the menu is open.

All props from IconButton, except appearance, size, asChild, and icon (which is redefined as optional below).

Prop	Type	Default	Description
`icon?`	`ReactNode`	Caret-down icon	Custom icon to render instead of the default caret-down.
`type?`	`"button"` \| `"submit"` \| `"reset"`	`"button"`	The type attribute of the button.

SplitButton.MenuContent

The container for the split button dropdown menu content. Appears in a portal with scrolling and animations. Wraps DropdownMenu.Content.

All props from DropdownMenu.Content.

Prop	Type	Default	Description
`align?`	`"start"` \| `"center"` \| `"end"`	`"end"`	The preferred alignment against the trigger.

SplitButton.MenuItem

A standard item in the split button dropdown menu that can be selected or activated. Wraps DropdownMenu.Item with gap-2 styling.

All props from DropdownMenu.Item.

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose onto alternative element types like anchors or custom components.