Components
SplitButton
A primary button paired with an attached dropdown of secondary actions.
SplitButton pairs a primary action with a dropdown of related alternatives.
Clicking the left button runs the default onClick; the attached chevron opens
a small menu of actions, each with its own onSelect handler. Use it when one
action is the obvious default but a few variations (Save and close, Save as
draft, …) should stay one click away. It forwards Button props such as
variant and size.
Example
Preview
import { SplitButton } from '@officina/ui';
<SplitButton
label="Save"
onClick={save}
actions={[
{ label: 'Save and close', onSelect: saveAndClose },
{ label: 'Save as draft', onSelect: saveDraft },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| actions* | SplitButtonAction[] | — | Secondary actions shown in the attached dropdown. |
| label* | ReactNode | — | Label for the primary (left) button. |
| isLoading | boolean | — | Show a loading spinner and disable the button while an action is in flight. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | null | md | |
| variant | "primary" | "secondary" | "outline" | "ghost" | "soft" | "danger" | "success" | null | primary |