Button

Buttons trigger an action, such as submitting a form, closing a dialog, or navigating to a new page.

Usage

import '@vonage/vivid/button';

or, if you need to use a unique prefix:

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

registerButton('your-prefix');

Link Buttons

Use the href attribute to change the button to a link. When doing so, all of the native attributes of <a> are supported, including target.

Semantically, buttons are usually used for triggering actions, while links are used for navigation. Mixing these semantics might lead to confusion or unexpected behavior for users.

See Client-Side Navigation for more information on how to integrate with Vue Router.

Slots

Icon Slot

Use the icon slot to customise icons. If set, the icon attribute is ignored.

CSS Variables

Button Content Alignment

When dropdown-indicator is set button, the content alignment is set to start.
If center is needed, set --button-content-alignment: center;.

API Reference

Properties

Name	Type	Description
(deprecated as of 05/25) icon	Enum: `[icon-name]`	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons and `icon-name`s
icon-trailing	`boolean`	Indicates the icon affix alignment.
aria-current	Enum: `page` `step` `location` `date` `time` `true` `false`	Indicates the element that represents the current item within a container or set of related elements.
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
value	`string`	The initial value of the form. This value sets the `value` property only when the `value` property has not been explicitly set.
current-value	`string`	The current value of the element. This property serves as a mechanism to set the `value` property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
required	`boolean`	Require the field to be completed prior to form submission.
autofocus	`boolean`	Determines if the element should receive document focus on page load.
form	`string`	The id of a form to associate the element to.
formaction	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formenctype	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formmethod	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formnovalidate	`boolean`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formtarget	Enum: `_self` `_blank` `_parent` `_top`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
type	Enum: `submit` `reset` `button`	The button type.
title	`string`
connotation	Enum: `accent` `cta` `success` `alert`	The connotation the button should have.
shape	Enum: `rounded` `pill`	The shape the button should have.
appearance	Enum: `filled` `outlined` `ghost`	The appearance the button should have.
size	Enum: `super-condensed` `condensed` `normal` `expanded`	The size the button should have.
stacked	`boolean`	Indicates the icon is stacked.
pending	`boolean`	Displays the button in pending state.
active	`boolean`	Displays the button in active state.
dropdown-indication	`boolean`	Display a chevron to indicate that the button opens a dropdown.
label	`string`	Indicates the button's label.
href	`string`	Indicates the button's href.
download	`string`	Indicates the button's download.
hreflang	`string`	Indicates the button's hreflang.
ping	`string`	Indicates the button's ping.
referrerpolicy	`string`	Indicates the button's referrerpolicy.
rel	`string`	Indicates the button's rel.
target	Enum: `_self` `_blank` `_parent` `_top`	Indicates the target's rel.

Events

Name	Event Type	Description
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.
blur	`FocusEvent`	Fires when the element loses focus.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.
input	`Event`	Fires when the value of an element has been changed.

Slots

Name	Description
icon	Add an icon to the component