Vivid Logo Vivid

Split Button

A button with two parts: a label and an arrow; clicking on the label selects a default action, and clicking on the arrow opens up a list of other possible actions.

Usage

import '@vonage/vivid/split-button';

or, if you need to use a unique prefix:

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

registerSplitButton('your-prefix');

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
	import { registerSplitButton } from 'vivid-bundle';
	registerSplitButton('your-prefix');
</script>

<your-prefix-split-button
	label="My Button"
	indicator-aria-label="More actions"
></your-prefix-split-button>

<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.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-split-button
	id="splitButton"
	appearance="outlined"
	label="A default split button"
>
	<vwc-menu id="menu" placement="bottom-end" open>
		<vwc-menu-item text="Menu item 1"></vwc-menu-item>
		<vwc-menu-item text="Menu item 2"></vwc-menu-item>
	</vwc-menu>
</vwc-split-button>

<script>
	window.onload = function () {
		menu.anchor = splitButton.indicator;
		splitButton.addEventListener('action-click', () => {
			alert('clicked on action');
		});
		splitButton.addEventListener('indicator-click', () => {
			menu.open = !menu.open;
		});
	};
</script>

Icon Slot

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-split-button appearance="outlined" label="submit">
	<vwc-icon
		slot="icon"
		name="check-circle-solid"
		connotation="success"
	></vwc-icon>
</vwc-split-button>

API Reference

Properties

Name Type Description
appearance ghost (default), filled, outlined 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
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
icon string Icon for the primary 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 openned by the secondary action (eg 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