Skip to content

VButton

Props

NameTypeDescription
activebooleanDisplays the button in active state.
appearanceEnum:
filled
outlined
ghost
ghost-light
outlined-light
The appearance the button should have.
autofocusbooleanDetermines if the element should receive document focus on page load.
connotationEnum:
accent
announcement
cta
success
alert
The connotation the button should have.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
downloadstringPrompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
dropdown-indicatorbooleanDisplay a chevron to indicate that the button opens a dropdown.
formstringThe id of a form to associate the element to.
formactionstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formenctypestringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formmethodstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formnovalidatebooleanSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
formtargetEnum:
_self
_blank
_parent
_top
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
hrefstringThe URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hreflangstringHints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1229 more ...
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailingbooleanIndicates the icon affix alignment.
initial-valuestringThe default value of the element. This value sets the value property only when the value property has not been explicitly set.
labelstringIndicates the button's label.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
pendingbooleanDisplays the button in pending state.
pingstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
referrerpolicystringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
relstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
requiredbooleanRequire the field to be completed prior to form submission.
shapeEnum:
rounded
pill
The shape the button should have.
sizeEnum:
super-condensed
condensed
normal
expanded
The size the button should have.
stackedbooleanIndicates the icon is stacked.
targetEnum:
_self
_blank
_parent
_top
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
titlestringSpecifies extra information about the button. This information is typically used by browsers to display a tooltip.
typeEnum:
submit
reset
button
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
valuestringThe current value of the element.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
clickMouseEventFires 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.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
iconThe preferred way to add an icon to the component.

Methods

NameTypeDescription
checkValidity() => booleanReturn the current validity of the element.
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.
validate() => void{@inheritDoc (FormAssociated:interface).validate}