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.
import { registerSplitButton } from '@vonage/vivid';
registerSplitButton('your-prefix');
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.
| Property |
Type |
Default |
Description |
| appearance |
'ghost' | 'filled' | 'outlined' | 'outlined-light' |
|
Sets the appearance |
| connotation |
'alert' | 'accent' | 'cta' | 'success' | 'announcement' |
|
Sets the connotation |
| disabled |
boolean |
|
Sets the disabled state |
| icon |
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
| indicatorAriaLabel |
string |
|
Accessible label for the secondary action |
| label |
string |
|
Indicates the split button's label. |
| shape |
'rounded' | 'pill' |
|
Sets the shape |
| size |
'condensed' | 'normal' | 'expanded' | 'super-condensed' |
|
Sets the size |
| splitIndicator |
string |
|
Icon for the secondary action |
| Property |
Type |
Default |
Description |
|
appearance
|
'ghost' | 'filled' | 'outlined' | 'outlined-light' |
|
Sets the appearance |
|
connotation
|
'alert' | 'accent' | 'cta' | 'success' | 'announcement' |
|
Sets the connotation |
|
disabled
|
boolean |
|
Sets the disabled state |
|
icon
|
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
|
indicator-aria-label
|
string |
|
Accessible label for the secondary action |
|
label
|
string |
|
Indicates the split button's label. |
|
shape
|
'rounded' | 'pill' |
|
Sets the shape |
|
size
|
'condensed' | 'normal' | 'expanded' | 'super-condensed' |
|
Sets the size |
|
split-indicator
|
string |
|
Icon for the secondary action |
| Name |
Description |
| default |
Default slot.
|
| icon |
The preferred way to add an icon to the component.
|
| Name |
Description |
| default |
Default slot. |
| icon |
The preferred way to add an icon to the component. |
| Event |
Type |
Description |
| action-click |
CustomEvent<undefined> |
Event emitted when the action button is clicked |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| indicator-click |
CustomEvent<undefined> |
Event emitted when the indicator button is clicked |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Type |
Description |
| action-click |
CustomEvent<undefined> |
Event emitted when the action button is clicked |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| indicator-click |
CustomEvent<undefined> |
Event emitted when the indicator button is clicked |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
