Vivid Logo Vivid

Button

Buttons trigger an action, such as submitting a form, closing a dialog, or navigating to a new page.

Label

The label attribute controls button's label text.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-button label="Button Text"></vwc-button>

Appearance

The appearance attribute controls the style of button displayed.

The outlined-light and ghost-light appearances are the same as outlined and ghost except their background colours have opacity when hovered.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button appearance="filled" label="Filled"></vwc-button>
<vwc-button appearance="outlined" label="Outlined"></vwc-button>
<vwc-button appearance="outlined-light" label="Outlined Light"></vwc-button>
<vwc-button appearance="ghost" label="Ghost"></vwc-button>
<vwc-button appearance="ghost-light" label="Ghost Light"></vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

Connotation

The connotation attribute controls the purpose of the button, expressed in it's colours.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button
connotation="accent"
appearance="filled"
label="Accent"
></vwc-button>
<vwc-button
connotation="accent"
appearance="outlined"
label="Accent"
></vwc-button>
<vwc-button
connotation="accent"
appearance="outlined-light"
label="Accent"
></vwc-button>
<vwc-button
connotation="accent"
appearance="ghost"
label="Accent"
></vwc-button>
<vwc-button
connotation="accent"
appearance="ghost-light"
label="Accent"
></vwc-button>
</div>
<div class="container">
<vwc-button connotation="cta" appearance="filled" label="CTA"></vwc-button>
<vwc-button connotation="cta" appearance="outlined" label="CTA"></vwc-button>
<vwc-button
connotation="cta"
appearance="outlined-light"
label="CTA"
></vwc-button>

Icon

The icon attribute displays an icon from the icon library](/icons/icons-gallery/), which can be displayed on the leading (default) or trailing side (icon-trailing) of the badge.

The preferred way to add icons is to use the icon slot.

The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button
appearance="outlined"
label="Copy document"
icon="copy-line"
></vwc-button>
<vwc-button
appearance="outlined"
label="Continue"
icon="chevron-right-line"
icon-trailing
></vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

Icon Only

If the label is omitted, the button will be displayed as an icon-only button.

When an element has no visible text, provide an accessible name using the aria-labelattribute. This ensures screen reader users can understand the element’s purpose, even when it's represented only by an icon or visual styling.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-tooltip text="Send Message" placement="right-start">
<vwc-button
slot="anchor"
appearance="filled"
connotation="cta"
aria-label="Send Message"
>
<vwc-icon name="message-sent-line" slot="icon"></vwc-icon>
</vwc-button>
</vwc-tooltip>

Stacked

When using an icon, the stacked attribute causes the button to be displayed in a stacked format. This layout is only available with the 'rounded' shape.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button stacked appearance="filled" label="Leading">
<vwc-icon name="compose-line" slot="icon"></vwc-icon>
</vwc-button>
<vwc-button stacked appearance="filled" label="Trailing" icon-trailing>
<vwc-icon name="compose-line" slot="icon"></vwc-icon>
</vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

Size

The size attribute controls the size of the button.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button
size="super-condensed"
appearance="filled"
label="Super-condensed"
></vwc-button>
<vwc-button
size="condensed"
appearance="filled"
label="Condensed"
></vwc-button>
<vwc-button size="normal" appearance="filled" label="Normal"></vwc-button>
<vwc-button size="expanded" appearance="filled" label="Expanded"></vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

Shape

The shape attribute controls the shape of the button.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button appearance="filled" label="Rounded shape"></vwc-button>
<vwc-button appearance="filled" label="Pill shape" shape="pill"></vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

Pending

The pending attribute triggers the pending state, which indicates that the action is being processed.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button appearance="filled" label="Pending" pending>
<vwc-icon name="compose-line" slot="icon"></vwc-icon>
</vwc-button>
<vwc-button appearance="filled" label="Pending" pending></vwc-button>
<vwc-button appearance="outlined" label="Pending" pending>
<vwc-icon name="compose-line" slot="icon"></vwc-icon>
</vwc-button>
<vwc-button appearance="ghost" label="Pending" pending>
<vwc-icon name="compose-line" slot="icon"></vwc-icon>
</vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

The spinner is not displayed when using the super-condensed size.

Disabled

The disabled attribute disables the buttons and indicates that the action is not available.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button appearance="filled" label="Disabled" disabled></vwc-button>
<vwc-button appearance="outlined" label="Disabled" disabled></vwc-button>
<vwc-button appearance="ghost" label="Disabled" disabled></vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

Active

The active attribute causes the button to appear in its active state. Use it to indicate that the action was triggered by some other means.

Do not use this attribute to indicate a selected or pressed state.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button appearance="filled" label="Active" active></vwc-button>
<vwc-button appearance="outlined" label="Active" active></vwc-button>
<vwc-button appearance="outlined-light" label="Active" active></vwc-button>
<vwc-button appearance="ghost" label="Active" active></vwc-button>
<vwc-button appearance="ghost-light" label="Active" active></vwc-button>
</div>

<style>
.container {
display: flex;
gap: 16px;
}
</style>

When the button is used to trigger a menu / dropdown, you can set dropdown-indicator to add a chevron to the button.

When setting dropdown-indicator the Button's content alignment changes from center to start. You can change it back to center using --button-content-alignment CSS variable

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-menu trigger="auto" auto-dismiss placement="bottom-start">
<vwc-button
slot="anchor"
appearance="outlined-light"
label="Menu"
dropdown-indicator
></vwc-button>
<vwc-menu-item icon="copy-line" text="Copy"></vwc-menu-item>
<vwc-menu-item icon="inbox-line" text="Share"></vwc-menu-item>
<vwc-menu-item icon="delete-line" text="Archive"></vwc-menu-item>
</vwc-menu>