Vivid Vue
On this page

VButton ​

Props ​

NameTypeDescription
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
... 1208 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.
aria-currentEnum:
page
step
location
date
time
true
false		Indicates the element that represents the current item within a container or set of related elements.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
initial-valuestringThe initial value of the form. This value sets the value property only when the value property has not been explicitly set.
valuestringThe 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.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
requiredbooleanRequire the field to be completed prior to form submission.
autofocusbooleanDetermines if the element should receive document focus on page load.
formnovalidatebooleanSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
titlebooleanDetermines if the element should receive document focus on page load.
connotationEnum:
accent
announcement
cta
success
alert		The connotation the button should have.
shapeEnum:
rounded
pill		The shape the button should have.
appearanceEnum:
filled
outlined
ghost
ghost-light
outlined-light		The appearance the button should have.
sizeEnum:
super-condensed
condensed
normal
expanded		The size the button should have.
stackedbooleanIndicates the icon is stacked.
pendingbooleanDisplays the button in pending state.
dropdown-indicatorbooleanDisplay a chevron to indicate that the button opens a dropdown.
activebooleanDisplays the button in active state.
labelstringIndicates the button's label.
hrefstringIndicates the button's href.
downloadstringIndicates the button's download.
hreflangstringIndicates the button's hreflang.
pingstringIndicates the button's ping.
referrerpolicystringIndicates the button's referrerpolicy.
relstringIndicates the button's rel.
targetEnum:
_self
_blank
_parent
_top		Indicates the target's rel.
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
formtargetEnum:
_self
_blank
_parent
_top		See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
typeEnum:
submit
reset
button		The button type.

Events ​

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

Slots ​

NameDescription
iconAdd an icon to the component.

Methods ​

NameTypeDescription
validate() => void{@inheritDoc (FormAssociated:interface).validate}