VButton
Props
| Name | Type | Description |
|---|---|---|
| active | boolean | Displays the button in active state. |
| appearance | Enum:filledoutlinedghostghost-lightoutlined-light | The appearance the button should have. |
| aria-current | Enum:pagesteplocationdatetimetruefalse | Indicates the element that represents the current item within a container or set of related elements. |
| autofocus | boolean | Determines if the element should receive document focus on page load. |
| connotation | Enum:accentannouncementctasuccessalert | 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 | Indicates the button's download. |
| 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 |
| 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 |
| href | string | Indicates the button's href. |
| hreflang | string | Indicates the button's hreflang. |
| icon | Enum:10-sec-backward-line10-sec-backward-solid10-sec-forward-line10-sec-forward-solid30-sec-backward-line30-sec-backward-solid30-sec-forward-line30-sec-forward-solid5-sec-backward-line5-sec-backward-solid5-sec-forward-line5-sec-forward-solid... 1227 more ... | A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
| icon-trailing | boolean | Indicates the icon affix alignment. |
| initial-value | string | The initial value of the form. 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 | Indicates the button's ping. |
| referrerpolicy | string | Indicates the button's referrerpolicy. |
| rel | string | Indicates the button's rel. |
| required | boolean | Require the field to be completed prior to form submission. |
| shape | Enum:roundedpill | The shape the button should have. |
| size | Enum:super-condensedcondensednormalexpanded | The size the button should have. |
| stacked | boolean | Indicates the icon is stacked. |
| target | Enum:_self_blank_parent_top | Indicates the target's rel. |
| title | string | Specifies extra information about the button. This information is typically used by browsers to display a tooltip. |
| type | Enum:submitresetbutton | The button type. |
| 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. |
Events
| Name | 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. |
Slots
| Name | Description |
|---|---|
| icon | Add an icon to the component. |
Methods
| Name | Type | Description |
|---|---|---|
| validate | () => void | {@inheritDoc (FormAssociated:interface).validate} |