Vivid Logo Vivid

Split Button

A split button is a dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.

Usage

import { registerSplitButton } from '@vonage/vivid';

registerSplitButton('your-prefix');
<script setup lang="ts">
	import { VSplitButton } from '@vonage/vivid-vue';
</script>
<template>
	<VSplitButton
		appearance="filled"
		label="My Button"
		indicator-aria-label="More actions"
	/>
</template>

Slots

Default Slot

Use the default slot to add content to be openned when clicking the secondary action.

Icon Slot

Use the icon slot add custom icons. If set, the icon attribute is ignored.

API Reference

Properties

Name Type Description
appearance ghost (default), filled, outlined, outlined-light Sets the appearance
action HTMLButtonElement A read-only HTML button element that represents the left button.
connotation accent (default), cta, announcement, success, alert Sets the connotation
disabled boolean Sets the disabled state
(deprecated as of 05/25)
icon
string Icon for the primary action
indicator HTMLButtonElement A read-only HTML button element that represents the right button.
indicator-aria-label string Accessible label for the secondary action
shape rounded (default), pill Sets the shape
size normal (default), super-condensed, condensed, expanded Sets the size
split-indicator string Icon for the secondary action

Slots

Name Description
default Content to be opened by the secondary action (e.g. Menu)
icon For custom icons

Events

Name Type Bubbles Composed Description
action-click CustomEvent<undefined> Yes Yes Event emitted when the action button is clicked
indicator-click CustomEvent<undefined> Yes Yes Event emitted when the indicator button is clicked