Button
Buttons trigger an action, such as submitting a form, closing a dialog, or navigating to a new page.
import { registerButton } from '@vonage/vivid';
registerButton('your-prefix');
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.
Use the icon slot to customise icons. If set, the icon attribute is ignored.
When dropdown-indicator is set button, the content alignment is set to start.
If center is needed, set --button-content-alignment: center;.
| Property |
Type |
Default |
Description |
| active |
boolean |
|
Displays the button in active state. |
| appearance |
'ghost' | 'filled' | 'outlined' | 'ghost-light' | 'outlined-light' |
|
The appearance the button should have. |
| autofocus |
boolean |
|
Determines if the element should receive document focus on page load. |
| connotation |
'alert' | 'accent' | 'cta' | 'success' | 'announcement' |
|
The connotation the button should have. |
| disabled |
boolean |
|
Sets the element's disabled state. A disabled element will not be included during form submission. |
| download |
string |
|
Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| dropdownIndicator |
boolean |
|
Display a chevron to indicate that the button opens a dropdown. |
| formId |
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 | <button> element for more details. |
| formenctype |
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
| formmethod |
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
| formnovalidate |
boolean |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
| formtarget |
'_self' | '_blank' | '_parent' | '_top' |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
| href |
string |
|
The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| hreflang |
string |
|
Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| 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/ |
| iconTrailing |
boolean |
|
Indicates the icon affix alignment. |
| initialValue |
string |
|
The default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. |
| label |
string |
|
Indicates the button's label. |
| name |
string |
|
The name of the element. This element's value will be surfaced during form submission under the provided name. |
| pending |
boolean |
|
Displays the button in pending state. |
| ping |
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| referrerpolicy |
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| rel |
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| required |
boolean |
|
Require the field to be completed prior to form submission. |
| shape |
'rounded' | 'pill' |
|
The shape the button should have. |
| size |
'condensed' | 'normal' | 'expanded' | 'super-condensed' |
|
The size the button should have. |
| stacked |
boolean |
|
Indicates the icon is stacked. |
| target |
'_self' | '_blank' | '_parent' | '_top' |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| title |
string |
|
Specifies extra information about the button. This information is typically used by browsers to display a tooltip. |
| type |
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
| value |
string |
|
The current value of the element. |
| Property |
Type |
Default |
Description |
|
active
|
boolean |
|
Displays the button in active state. |
|
appearance
|
'ghost' | 'filled' | 'outlined' | 'ghost-light' | 'outlined-light' |
|
The appearance the button should have. |
|
autofocus
|
boolean |
|
Determines if the element should receive document focus on page load. |
|
connotation
|
'alert' | 'accent' | 'cta' | 'success' | 'announcement' |
|
The connotation the button should have. |
|
disabled
|
boolean |
|
Sets the element's disabled state. A disabled element will not be included during form submission. |
|
download
|
string |
|
Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
dropdown-indicator
|
boolean |
|
Display a chevron to indicate that the button opens a dropdown. |
|
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 | <button> element for more details. |
|
formenctype
|
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
|
formmethod
|
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
|
formnovalidate
|
boolean |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
|
formtarget
|
'_self' | '_blank' | '_parent' | '_top' |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. |
|
href
|
string |
|
The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
hreflang
|
string |
|
Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
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/ |
|
icon-trailing
|
boolean |
|
Indicates the icon affix alignment. |
|
value
|
string |
|
The default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. |
|
label
|
string |
|
Indicates the button's label. |
|
name
|
string |
|
The name of the element. This element's value will be surfaced during form submission under the provided name. |
|
pending
|
boolean |
|
Displays the button in pending state. |
|
ping
|
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
referrerpolicy
|
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
rel
|
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
required
|
boolean |
|
Require the field to be completed prior to form submission. |
|
shape
|
'rounded' | 'pill' |
|
The shape the button should have. |
|
size
|
'condensed' | 'normal' | 'expanded' | 'super-condensed' |
|
The size the button should have. |
|
stacked
|
boolean |
|
Indicates the icon is stacked. |
|
target
|
'_self' | '_blank' | '_parent' | '_top' |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
title
|
string |
|
Specifies extra information about the button. This information is typically used by browsers to display a tooltip. |
|
type
|
string |
|
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information. |
|
current-value
|
string |
|
The current value of the element. |
| Name |
Description |
| icon |
The preferred way to add an icon to the component.
|
| Name |
Description |
| icon |
The preferred way to add an icon to the component. |
| Event |
Type |
Description |
| 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. |
| 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 |
| 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. |
| 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 |
Params |
Returns |
Description |
| checkValidity |
|
boolean
|
Return the current validity of the element. |
| reportValidity |
|
boolean
|
Return the current validity of the element.
If false, fires an invalid event at the element. |
| validate |
|
void
|
{@inheritDoc (FormAssociated:interface).validate} |
