<template>
<w-stack gap="small">
<w-button label="Default" />
<w-button label="Primary" variant="primary" />
<w-button label="Secondary" variant="secondary" />
<w-button label="Danger" variant="danger" />
<w-button label="Plain" variant="plain" />
</w-stack>
</template>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
aria-controls |
Identifies the element (or elements) whose contents or presence are controlled by this component. |
string |
|
|
|
counter |
Controls the display of a badge with a numeric or percentage counter. |
number|string |
|
|
|
counter-type |
Allows you to choose the badge type. |
string |
neutral |
accent, accent-inverted, neutral, info, success, warning, danger, neutral-inverted, info-inverted, success-inverted, warning-inverted, danger-inverted |
|
href |
When provided, renders the button as an anchor tag <a>, with its href attribute set to the given value. |
string |
|
|
|
to Vue only |
Use if linking to a Vue route with Router |
string|object |
|
|
|
label Required |
Defines text of the button |
string |
|
|
|
leading-icon |
Displays an icon to the left of the label. |
string |
|
icon name (i.e. "alarm-clock") |
|
leading-icon-color |
Sets the color of the leading icon. Only works when variant is "plain". |
string |
|
primary, secondary, muted, inverted, accent, success, warning, danger, accent-inverted, success-inverted, info, info-inverted, danger-inverted, or hexadecimal color (#176d00) |
|
trailing-icon |
Displays an icon to the right of the label. |
string |
|
icon name (i.e. "alarm-clock") |
|
type |
Specifies the type of button. |
string |
button |
button, submit, reset |
|
variant |
Defines the purpose of the button. |
string |
default |
default, primary, secondary, danger, plain |
|
loading |
Controls if the button is in a loading state or not. |
boolean |
false |
false, true |
|
full-width |
Controls if the button extends to fill the container. |
boolean |
false |
false, true |
|
align-label |
Controls the alignment of the label. |
string |
center |
center, start, end |
Events
Button component supports all native events of the HTML <button> element. It means that it emits the click event for mouse click and enter or space key pressed while the button is in focus state.