Vitral 0.2
Button

SplitButton

A command with a menu of related commands welded to it.

WAI-ARIA tested

Import

main.ts
import { SplitButton } from '@vitral/vue';

Basic

Last command: —
<script setup lang="ts">import { SplitButton, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const items: MenuItem[] = [    { label: 'Save as draft', icon: 'file', command: () => (last.value = 'Save as draft') },    { label: 'Save and close', icon: 'check', command: () => (last.value = 'Save and close') },    { separator: true },    { label: 'Export', icon: 'download', command: () => (last.value = 'Export') },    { label: 'Delete', icon: 'trash', disabled: true }];</script> <template>    <SplitButton label="Save" icon="check" :model="items" @click="last = 'Save'" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

Severities and variants

<script setup lang="ts">import { SplitButton, type MenuItem } from '@vitral/vue'; const items: MenuItem[] = [    { label: 'Save as draft', icon: 'file' },    { label: 'Save and close', icon: 'check' },    { separator: true },    { label: 'Export', icon: 'download' },    { label: 'Delete', icon: 'trash', disabled: true }];</script> <template>    <SplitButton label="Save" :model="items" severity="secondary" />    <SplitButton label="Save" :model="items" severity="success" rounded />    <SplitButton label="Save" :model="items" severity="danger" variant="outlined" />    <SplitButton label="Save" :model="items" variant="text" raised /></template>

Sizes and states

<script setup lang="ts">import { SplitButton, type MenuItem } from '@vitral/vue'; const items: MenuItem[] = [    { label: 'Save as draft', icon: 'file' },    { label: 'Save and close', icon: 'check' },    { separator: true },    { label: 'Export', icon: 'download' },    { label: 'Delete', icon: 'trash', disabled: true }];</script> <template>    <SplitButton label="Small" :model="items" size="small" />    <SplitButton label="Large" :model="items" size="large" />    <SplitButton label="Saving" :model="items" loading />    <SplitButton label="Disabled" :model="items" disabled /></template>

API

Read from packages/vue/src/components/SplitButton/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
labelstringThe main command's text.
iconIconProp—
modelMenuItem[]The commands in the menu, as for `<Menu>`.
dropdownIconIconPropThe menu button's icon. Defaults to a chevron.
severitySeverity—
variant'filled' | 'outlined' | 'text'—
sizeSize—
roundedboolean—
raisedboolean—
fluidboolean—
disabledboolean—
loadingbooleanShows a spinner on the main button and disables it.
menuButtonLabelstringNames the menu button. Defaults to the locale's "More options".
placementOverlayPlacement—
appendTostringWhere the menu renders: `'body'` (the default), `'self'`, or a selector.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
clickevent: MouseEventThe main button was pressed.
show——
hide——

Slots

NameSlot propsDescription
default—The main button's content.
icon——
dropdownicon——
item(props: { item: MenuItem; label: string | undefined; focused: boolean; disabled: boolean })An item of the menu, as `<Menu>`'s `item` slot.