Split Button
ProA primary action button fused to a chevron dropdown of secondary actions — composed from Button, the fused Input Group and Dropdown Menu, not a new control built from scratch.
</>sv-split-button buttondropdownmenuactions
import { SvSplitButtonComponent } from '@styloviz-pro/split-button';Demo & usage
Basic usage
ProUsage example — open the gallery for the full interactive demo.
Pro
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Grouped secondary actions
ProDanger action, loading primary
ProWhen to use
- One dominant action with a small set of closely related variants (e.g. "Deploy" plus "Deploy to staging"/"Deploy preview").
- You want the primary action a single click away, with alternates one click further — not a plain Dropdown Menu where every option carries equal weight.
- For a set of equally-weighted actions, use a Button Group or a plain Dropdown Menu instead.
Async states
- loading
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | Label for the primary action button. |
| icon | string | '' | Icon-library NAME for a leading icon on the primary action button — e.g. `'plus'`. BREAKING (icon sweep). This was `iconPath` and was documented as "SVG path", but it is forwarded straight into `sv-button`'s `icon`, which the sweep converted to a library NAME. The input had therefore been quietly lying since that batch: a host passing a raw `d` string got a button with **no icon at all** and no error, because a `d` string is simply not a name the registry knows. Renaming it is what makes the type and the behaviour agree again. |
| variant | ButtonVariant | 'primary' | Semantic color/intent, forwarded to both buttons. |
| btnStyle | ButtonStyle | 'solid' | Visual treatment, forwarded to both buttons. |
| size | ButtonSize | 'md' | Size, forwarded to both buttons. |
| shape | ButtonShape | 'rounded' | Corner style, forwarded to both buttons (the fused seam always flattens the touching corners). |
| disabled | boolean | false | Disables both the primary action and the menu trigger. |
| loading | boolean | false | The primary action is in flight. |
| loadingBlocksMenu | boolean | false | Also disable the menu trigger while `loading`. |
| items | DropdownMenuItem[] | [] | Flat list of secondary-action menu items. Use `groups` for grouped menus. |
| groups | DropdownMenuGroup[] | [] | Grouped secondary-action menu items. Takes precedence over `items`. |
| placement | DropdownMenuPlacement | 'bottom-end' | Where the menu opens relative to the trigger. |
| menuAriaLabel | string | 'More actions' | Accessible name for the chevron trigger button. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| clicked | MouseEvent | Emitted on a click of the primary action button (suppressed while disabled/loading). |
| itemClick | string | Emitted with the id of the clicked secondary-action item. |
| itemSelect | DropdownMenuItem | Emitted with the full clicked secondary-action item object. |
Customization & theming
- Shares Button's `variant` / `btnStyle` / `size` / `shape` across both halves via `variant`, `btnStyle`, `size`, `shape`.
- Flat `items` or `groups` (same shape as Dropdown Menu) via `items` / `groups`, with `placement` for the popup side.
- `disabled` disables both halves; `loading` shows a loading state on the primary action only — the menu trigger stays interactive so alternates remain reachable mid-operation.
- Outputs: `clicked` (primary button), `itemClick` (secondary action id) and `itemSelect` (full item object).
Best practices
- Do: Keep the primary `label` the action users take most often — the menu is for variants, not unrelated commands.
- Do: Set `menuAriaLabel` to something specific ("More deploy options") when the default "More actions" is ambiguous in context.
- Don't: Don't bury the only way to do something inside the chevron menu — if there's no dominant action, this isn't the right component.
Accessibility
- The chevron trigger has its own accessible name via `menuAriaLabel` (default "More actions"), independent of the primary button's `label`.
- Built on Dropdown Menu, so the popup inherits its `menu`/`menuitem` ARIA roles and full keyboard navigation once opened.
Feedback on Split Button
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.