Actions

SplitButton

A primary action fused with a chevron that opens alternate actions in a dropdown.

Install

import { SplitButton } from 'vael-ui'

Playground

import { SplitButton } from 'vael-ui'

<SplitButton variant="primary" size="md" :disabled="false" :loading="false" triggerLabel="" side="top" align="start" :sideOffset="0" :alignOffset="0" closeOnEsc closeOnOutside :forceMount="false" scrollFade :items="items">SplitButton</SplitButton>

Props

Name	Type	Default	Description
`items`	`readonly MenuEntry<T>[]`		Dropdown rows — same shape as Menu.vue's `items`.
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "link" \| "text" \| "danger"`	`"primary"`
`size`	`"md" \| "sm" \| "lg"`	`"md"`
`disabled`	`boolean \| undefined`	`false`
`loading`	`boolean \| "auto" \| undefined`	`"auto"`	Forwarded to the main action Button only.
`triggerLabel`	`string \| undefined`		aria-label for the chevron button. Default: localized "More actions".
`side`	`"top" \| "right" \| "bottom" \| "left"`
`align`	`"start" \| "end" \| "center"`
`sideOffset`	`number \| undefined`
`alignOffset`	`number \| undefined`
`closeOnEsc`	`boolean \| undefined`	`undefined`
`closeOnOutside`	`boolean \| undefined`	`undefined`
`beforeClose`	`((done: () => void) => void) \| undefined`
`forceMount`	`boolean \| undefined`
`teleportTo`	`string \| HTMLElement \| undefined`
`scrollFade`	`boolean \| undefined`	`undefined`
`ui`	`Partial<{ root: UiPartValue; main: UiPartValue; trigger: UiPartValue; positioner: UiPartValue; panel: UiPartValue; header: UiPartValue; footer: UiPartValue; }> \| undefined`
`open`	`boolean \| undefined`	`false`

Slots

Name	Type	Description
`default`	`any`	Main action button content.
`header`	`any`	Forwarded to the dropdown Menu's own `#header`.
`item`	`{ item: T; }`	Override one dropdown row's content while keeping its behavior — forwarded to Menu's own `#item`.
`footer`	`any`	Forwarded to the dropdown Menu's own `#footer`.

Events

Name	Type	Description
`open-change`	`[value: boolean, details: PopoverOpenChangeDetails]`
`select`	`[item: T]`
`update:open`	`[value: boolean]`

Exposed

Name	Type	Description
`el`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`mainEl`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`triggerEl`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`panelEl`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`positionerEl`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`isClosing`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`open`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`close`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.
`cancelClose`	`unknown`	Type inference unavailable — vue-component-meta cannot resolve defineExpose on this generic component.