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.

import { CopyIcon, FileTextIcon } from "@phosphor-icons/react";
import { Icon } from "@ngrok/mantle/icon";
import { SplitButton } from "@ngrok/mantle/split-button";

<SplitButton.Root>
	<SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end">
		Copy page
	</SplitButton.PrimaryAction>
	<SplitButton.MenuTrigger label="Open actions menu" />
	<SplitButton.MenuContent>
		<SplitButton.MenuItem>
			Copy page
			<Icon svg={<CopyIcon />} />
		</SplitButton.MenuItem>
		<SplitButton.MenuItem>
			View as Markdown
			<Icon svg={<FileTextIcon />} />
		</SplitButton.MenuItem>
	</SplitButton.MenuContent>
</SplitButton.Root>;

Composition

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.

import { DownloadIcon, FileTextIcon } from "@phosphor-icons/react";
import { Icon } from "@ngrok/mantle/icon";
import { SplitButton } from "@ngrok/mantle/split-button";

<SplitButton.Root>
	<SplitButton.PrimaryAction icon={<DownloadIcon />} iconPlacement="end">
		Download
	</SplitButton.PrimaryAction>
	<SplitButton.MenuTrigger label="Open download options" />
	<SplitButton.MenuContent>
		<SplitButton.MenuItem>
			Download as PDF
			<Icon svg={<DownloadIcon />} />
		</SplitButton.MenuItem>
		<SplitButton.MenuItem asChild>
			<a href="https://example.com" target="_blank">
				Open in new tab
				<Icon svg={<FileTextIcon />} />
			</a>
		</SplitButton.MenuItem>
	</SplitButton.MenuContent>
</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:

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.

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).

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.

SplitButton.MenuItem

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

All props from DropdownMenu.Item.