Button
Buttons trigger an action, such as submitting a form, closing a dialog, or navigating to a new page.
The label attribute controls button’s label text.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <VButton label="Button Text" /></template><vwc-button label="Button Text"></vwc-button>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.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton appearance="filled" label="Filled" /> <VButton appearance="outlined" label="Outlined" /> <VButton appearance="outlined-light" label="Outlined Light" /> <VButton appearance="ghost" label="Ghost" /> <VButton appearance="ghost-light" label="Ghost Light" /> </div></template>
<style>.container { display: flex; gap: 16px;}</style><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>The connotation attribute controls the purpose of the button, expressed in it’s colours.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton connotation="accent" appearance="filled" label="Accent" /> <VButton connotation="accent" appearance="outlined" label="Accent" /> <VButton connotation="accent" appearance="outlined-light" label="Accent" /> <VButton connotation="accent" appearance="ghost" label="Accent" /> <VButton connotation="accent" appearance="ghost-light" label="Accent" /> </div> <div class="container"> <VButton connotation="cta" appearance="filled" label="CTA" /> <VButton connotation="cta" appearance="outlined" label="CTA" /> <VButton connotation="cta" appearance="outlined-light" label="CTA" /> <VButton connotation="cta" appearance="ghost" label="CTA" /> <VButton connotation="cta" appearance="ghost-light" label="CTA" /> </div> <div class="container"> <VButton connotation="announcement" appearance="filled" label="Announcement" /> <VButton connotation="announcement" appearance="outlined" label="Announcement" /> <VButton connotation="announcement" appearance="outlined-light" label="Announcement" /> <VButton connotation="announcement" appearance="ghost" label="Announcement" /> <VButton connotation="announcement" appearance="ghost-light" label="Announcement" /> </div> <div class="container"> <VButton connotation="success" appearance="filled" label="Success" /> <VButton connotation="success" appearance="outlined" label="Success" /> <VButton connotation="success" appearance="outlined-light" label="Success" /> <VButton connotation="success" appearance="ghost" label="Success" /> <VButton connotation="success" appearance="ghost-light" label="Success" /> </div> <div class="container"> <VButton connotation="alert" appearance="filled" label="Alert" /> <VButton connotation="alert" appearance="outlined" label="Alert" /> <VButton connotation="alert" appearance="outlined-light" label="Alert" /> <VButton connotation="alert" appearance="ghost" label="Alert" /> <VButton connotation="alert" appearance="ghost-light" label="Alert" /> </div></template>
<style>.container { display: flex; flex-basis: 100%; width: 100%; gap: 8px; margin-block-end: 16px;}</style><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> <vwc-button connotation="cta" appearance="ghost" label="CTA"></vwc-button> <vwc-button connotation="cta" appearance="ghost-light" label="CTA"></vwc-button></div><div class="container"> <vwc-button connotation="announcement" appearance="filled" label="Announcement"></vwc-button> <vwc-button connotation="announcement" appearance="outlined" label="Announcement"></vwc-button> <vwc-button connotation="announcement" appearance="outlined-light" label="Announcement"></vwc-button> <vwc-button connotation="announcement" appearance="ghost" label="Announcement"></vwc-button> <vwc-button connotation="announcement" appearance="ghost-light" label="Announcement"></vwc-button></div><div class="container"> <vwc-button connotation="success" appearance="filled" label="Success"></vwc-button> <vwc-button connotation="success" appearance="outlined" label="Success"></vwc-button> <vwc-button connotation="success" appearance="outlined-light" label="Success"></vwc-button> <vwc-button connotation="success" appearance="ghost" label="Success"></vwc-button> <vwc-button connotation="success" appearance="ghost-light" label="Success"></vwc-button></div><div class="container"> <vwc-button connotation="alert" appearance="filled" label="Alert"></vwc-button> <vwc-button connotation="alert" appearance="outlined" label="Alert"></vwc-button> <vwc-button connotation="alert" appearance="outlined-light" label="Alert"></vwc-button> <vwc-button connotation="alert" appearance="ghost" label="Alert"></vwc-button> <vwc-button connotation="alert" appearance="ghost-light" label="Alert"></vwc-button></div>
<style> .container { display: flex; flex-basis: 100%; width: 100%; gap: 8px; margin-block-end: 16px; }</style>Use the icon slot to add an icon from the icon library. You can render it on the leading side (default) or trailing side (icon-trailing).
<script setup lang="ts">import { VButton, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton appearance="outlined" label="Copy document" ><template #icon><VIcon name="copy-line" /></template ></VButton> <VButton appearance="outlined" label="Continue" icon-trailing ><template #icon><VIcon name="chevron-right-line" /></template ></VButton> </div></template>
<style>.container { display: flex; gap: 16px;}</style><div class="container"> <vwc-button appearance="outlined" label="Copy document"><vwc-icon slot="icon" name="copy-line"></vwc-icon></vwc-button> <vwc-button appearance="outlined" label="Continue" icon-trailing><vwc-icon slot="icon" name="chevron-right-line"></vwc-icon></vwc-button></div>
<style> .container { display: flex; gap: 16px; }</style>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-label
<script setup lang="ts">import { VButton, VTooltip, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VTooltip text="Send Message" placement="right-start"> <template #anchor> <VButton appearance="filled" connotation="cta" aria-label="Send Message"> <template #icon><VIcon name="message-sent-line" /></template> </VButton> </template> </VTooltip></template><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>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.
<script setup lang="ts">import { VButton, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton stacked appearance="filled" label="Leading"> <template #icon><VIcon name="compose-line" /></template> </VButton> <VButton stacked appearance="filled" label="Trailing" icon-trailing> <template #icon><VIcon name="compose-line" /></template> </VButton> </div></template>
<style>.container { display: flex; gap: 16px;}</style><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>The size attribute controls the size of the button.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton size="super-condensed" appearance="filled" label="Super-condensed" /> <VButton size="condensed" appearance="filled" label="Condensed" /> <VButton size="normal" appearance="filled" label="Normal" /> <VButton size="expanded" appearance="filled" label="Expanded" /> </div></template>
<style>.container { display: flex; gap: 16px; align-items: start;}</style><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; align-items: start; }</style>The shape attribute controls the shape of the button.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton appearance="filled" label="Rounded shape" /> <VButton appearance="filled" label="Pill shape" shape="pill" /> </div></template>
<style>.container { display: flex; gap: 16px;}</style><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>The pending attribute triggers the pending state, which indicates that the action is being processed.
<script setup lang="ts">import { VButton, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton appearance="filled" label="Pending" pending> <template #icon><VIcon name="compose-line" /></template> </VButton> <VButton appearance="filled" label="Pending" pending> <template #icon><VIcon name="compose-line" /></template ></VButton> <VButton appearance="outlined" label="Pending" pending> <template #icon><VIcon name="compose-line" /></template> </VButton> <VButton appearance="ghost" label="Pending" pending> <template #icon><VIcon name="compose-line" /></template> </VButton> </div></template>
<style>.container { display: flex; gap: 16px;}</style><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-icon name="compose-line" slot="icon"></vwc-icon> </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> <vwc-button appearance="ghost" label="Pending" pending> </vwc-button></div>
<style> .container { display: flex; gap: 16px; }</style>The spinner is not displayed when using the super-condensed size.
The disabled attribute disables the buttons and indicates that the action is not available.
Disabled buttons should be used with caution. Read our guidelines for when to disabled buttons.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton appearance="filled" label="Disabled" disabled /> <VButton appearance="outlined" label="Disabled" disabled /> <VButton appearance="ghost" label="Disabled" disabled /> </div></template>
<style>.container { display: flex; gap: 16px;}</style><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>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.
<script setup lang="ts">import { VButton } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VButton appearance="filled" label="Active" active /> <VButton appearance="outlined" label="Active" active /> <VButton appearance="outlined-light" label="Active" active /> <VButton appearance="ghost" label="Active" active /> <VButton appearance="ghost-light" label="Active" active /> </div></template>
<style>.container { display: flex; gap: 16px;}</style><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>The pressed attribute indicates the button is in a pressed/toggled state. For ghost, ghost-light and outlined this is indicated with a change in appearance. For other appearance, update the icon or label to indicate the new state.
<script setup lang="ts">import { ref } from 'vue';import { VButton } from '@vonage/vivid-api-vue';
const ghostPressed = ref(true);const ghostLightPressed = ref(true);const outlinedPressed = ref(true);
</script>
<template> <div class="container"> <VButton appearance="ghost" label="Ghost" :pressed="ghostPressed" @click="ghostPressed = !ghostPressed" /> <VButton appearance="ghost-light" label="Ghost Light" :pressed="ghostLightPressed" @click="ghostLightPressed = !ghostLightPressed" /> <VButton appearance="outlined" label="Outlined" :pressed="outlinedPressed" @click="outlinedPressed = !outlinedPressed" /> </div></template>
<style>.container { display: flex; gap: 16px;}</style><div class="container"> <vwc-button id="vp-ghost" appearance="ghost" label="Ghost" pressed></vwc-button> <vwc-button id="vp-ghost-light" appearance="ghost-light" label="Ghost Light" pressed></vwc-button> <vwc-button id="vp-outlined" appearance="outlined" label="Outlined" pressed></vwc-button></div>
<script> ['vp-ghost', 'vp-ghost-light', 'vp-outlined'].forEach((id) => { document.getElementById(id).addEventListener('click', (e) => { e.currentTarget.toggleAttribute('pressed'); }); });</script>
<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
<script setup lang="ts">import { VButton, VMenu, VMenuItem, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VMenu auto-dismiss placement="bottom-start"> <template #anchor> <VButton appearance="outlined-light" label="Menu" dropdown-indicator /> </template> <VMenuItem text="Copy" ><template #icon><VIcon name="copy-line" /></template ></VMenuItem> <VMenuItem text="Share" ><template #icon><VIcon name="inbox-line" /></template ></VMenuItem> <VMenuItem text="Archive" ><template #icon><VIcon name="delete-line" /></template ></VMenuItem> </VMenu></template><vwc-menu auto-dismiss placement="bottom-start"> <vwc-button slot="anchor" appearance="outlined-light" label="Menu" dropdown-indicator></vwc-button> <vwc-menu-item text="Copy"> <vwc-icon slot="icon" name="copy-line"></vwc-icon> </vwc-menu-item> <vwc-menu-item text="Share"> <vwc-icon slot="icon" name="inbox-line"></vwc-icon> </vwc-menu-item> <vwc-menu-item text="Archive"> <vwc-icon slot="icon" name="delete-line"></vwc-icon> </vwc-menu-item></vwc-menu>