Components / Split Button
Split Button
Primary action plus an attached chevron that opens a dropdown of related actions (Save / Save as… / Save a copy). Shares variant/size/type with cg-button.
actionsv0.4.0
Playground
Examples
Default
<cg-split-button label="Save"></cg-split-button>Variants
<cg-stack direction="row" gap="sm"><cg-split-button label="Primary" variant="primary"></cg-split-button><cg-split-button label="Secondary" variant="secondary"></cg-split-button><cg-split-button label="Tertiary" variant="tertiary"></cg-split-button></cg-stack>Import
import { CgSplitButton } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-split-button';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Primary button label |
items | SplitButtonItem[] | — | Menu items: { id, label, icon?, shortcut?, disabled?, danger?, separator? } |
variant | "primary" | "secondary" | "tertiary" | "primary" | Visual variant |
size | "sm" | "md" | "lg" | "md" | Button size |
type | "normal" | "danger" | "normal" | Destructive action styling |
disabled | boolean | false | Disable both buttons |
loading | boolean | false | Show spinner on primary |
open | boolean | false | Menu open state (reflected) |
menu-placement | "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom-end" | Dropdown placement |
Events
| Event | Detail | Description |
|---|---|---|
cg-split-button-click | none | Primary action triggered |
cg-split-button-select | { id, item } | Menu item selected |
cg-split-button-open | none | Dropdown opened |
cg-split-button-close | none | Dropdown closed |