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.
import '@vonage/vivid/split-button';
or, if you need to use a unique prefix:
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>
Use the default slot to add content to be openned when clicking the secondary action.
Use the icon slot add custom icons. If set, the icon attribute is ignored.
| 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 |
| Name | Description |
|---|---|
| default | Content to be opened by the secondary action (e.g. Menu) |
| icon | For custom icons |
| 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 |