Component reference
SplitButton
Publish now or choose an alternative deployment action.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { SplitButton, PimoluSplitButtonItem, Badge } from "@pimolu/react";
const publishItems: PimoluSplitButtonItem[] = [
{
id: "draft",
label: "Save as draft",
icon: <span>✎</span>,
shortcut: "⌘S",
},
{
id: "schedule",
label: "Schedule for later",
icon: <span>◷</span>,
shortcut: "⌘⇧S",
},
{
id: "duplicate",
label: "Duplicate",
icon: <span>⧉</span>,
},
{
id: "archive",
label: "Archive",
icon: <span>▣</span>,
disabled: true,
},
];
function PublishControl() {
const [lastAction, setLastAction] = useState("none");
return (
<div className="grid gap-5 min-w-0">
<div className="flex flex-wrap items-center gap-3 min-w-0">
<SplitButton
aria-label="Publish document"
items={publishItems.map((item) => ({
...item,
onSelect: () => setLastAction(item.label),
}))}
onClick={() => setLastAction("Published now")}
>
Publish
</SplitButton>
<Badge variant="neutral">
last action: {lastAction}
</Badge>
</div>
<p className="text-sm text-muted leading-relaxed">
The primary button publishes immediately; the chevron opens the
secondary actions.
</p>
</div>
);
}
export function DemoExample() {
return (<PublishControl />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Variants, appearances and sizes
Both segments share the same semantic variant, appearance and size.
Menu content
Items support a decorative icon, a keyboard shortcut hint and a disabled state.
States
disabled turns off the primary action and the menu together; menu items can be disabled individually.
Usage
Keep the primary action predictable and put secondary choices in the associated menu.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluSplitButtonItem
Type source| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | — | Stable identity used as the menu item key. |
labelRequired | string | — | Visible label of the menu action. |
onSelect | (() => void) | undefined | — | Called when the action is selected; the menu then closes. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
icon | ReactNode | — | Decorative icon rendered before the label. |
shortcut | string | undefined | — | Optional keyboard shortcut hint, e.g. "⌘D". |
idRequiredstringNo default extracted.
Stable identity used as the menu item key.
labelRequiredstringNo default extracted.
Visible label of the menu action.
onSelect(() => void) | undefinedNo default extracted.
Called when the action is selected; the menu then closes.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
iconReactNodeNo default extracted.
Decorative icon rendered before the label.
shortcutstring | undefinedNo default extracted.
Optional keyboard shortcut hint, e.g. "⌘D".
PimoluSplitButtonProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content of the primary action. Takes precedence over `label`. |
label | ReactNode | — | Fallback content of the primary action. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | — | Primary action handler. |
itemsRequired | PimoluSplitButtonItem[] | — | Actions listed in the attached menu. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | the Button default ("primary") | Button semantic variant. Defaults to the Button default ("primary"). |
appearance | "solid" | "soft" | "outline" | "ghost" | "link" | "dashed" | "glass" | "elevated" | "glow" | "text" | undefined | the Button default ("solid") | Button appearance. Defaults to the Button default ("solid"). |
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined | the Button default ("md") | Button size. Defaults to the Button default ("md"). |
disabled | boolean | undefined | false | Disables both the primary action and the menu trigger. |
menuLabel | string | undefined | "More actions" | Accessible name of the menu trigger. Defaults to "More actions". |
align | "start" | "end" | undefined | "end" | Horizontal alignment of the menu panel. Defaults to "end". |
aria-label | string | undefined | — | Accessible name of the wrapping group. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
menuIcon | ReactNode | — | Replace the default chevron of the menu trigger. |
childrenReactNodeNo default extracted.
Content of the primary action. Takes precedence over `label`.
labelReactNodeNo default extracted.
Fallback content of the primary action.
onClickMouseEventHandler<HTMLButtonElement> | undefinedNo default extracted.
Primary action handler.
itemsRequiredPimoluSplitButtonItem[]No default extracted.
Actions listed in the attached menu.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: the Button default ("primary")
Button semantic variant. Defaults to the Button default ("primary").
appearance"solid" | "soft" | "outline" | "ghost" | "link" | "dashed" | "glass" | "elevated" | "glow" | "text" | undefinedDefault: the Button default ("solid")
Button appearance. Defaults to the Button default ("solid").
size"xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefinedDefault: the Button default ("md")
Button size. Defaults to the Button default ("md").
disabledboolean | undefinedDefault: false
Disables both the primary action and the menu trigger.
menuLabelstring | undefinedDefault: "More actions"
Accessible name of the menu trigger. Defaults to "More actions".
align"start" | "end" | undefinedDefault: "end"
Horizontal alignment of the menu panel. Defaults to "end".
aria-labelstring | undefinedNo default extracted.
Accessible name of the wrapping group.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
menuIconReactNodeNo default extracted.
Replace the default chevron of the menu trigger.
Accessibility
- Name both the main action and the menu trigger; verify Escape returns focus.