Vivid Logo Vivid

Button

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

Appearance

Filled

  • Highest-priority actions
  • Use once per section
  • Examples: Submit, Confirm or Save

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

Outlined

  • Non-critical actions
  • Examples: Back, Cancel, Edit or Add

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

Ghost

  • Tertiary actions
  • Examples: View terms, Back or Close
  • Group inside a Action Group for related actions

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

Outlined Light

  • Non-critical actions
  • Examples: Back, Cancel, Edit or Add

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-button appearance="outlined-light" label="Outlined Light"></vwc-button>

Ghost Light

  • Tertiary actions
  • Examples: View terms, Back or Close
  • Group inside a Action Group for related actions

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-button appearance="ghost-light" label="Ghost Light"></vwc-button>

Connotation

Accent

  • Purpose: Neutral
  • Examples: Close, Exit, Edit
  • Use when purpose is neither constructive or distructive

<!-- 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="ghost"
label="Accent"
></vwc-button>
<vwc-button
connotation="accent"
appearance="outlined-light"
label="Accent"
></vwc-button>
<vwc-button
connotation="accent"
appearance="ghost-light"
label="Accent"
></vwc-button>
</div>


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

CTA

  • Highest-priority actions that are required to complete the user’s task
  • Only used once per screen

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<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="ghost" label="CTA"></vwc-button>
<vwc-button
connotation="cta"
appearance="outlined-light"
label="CTA"
></vwc-button>
<vwc-button
connotation="cta"
appearance="ghost-light"
label="CTA"
></vwc-button>
</div>


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

Announcement

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<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="ghost"
label="Announcement"
></vwc-button>
<vwc-button
connotation="announcement"
appearance="outlined-light"
label="Announcement"
></vwc-button>
<vwc-button
connotation="announcement"
appearance="ghost-light"
label="Announcement"
></vwc-button>
</div>


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

Success

  • Represents a constructive action
  • Examples: complete, approve, resolve, add etc.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<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="ghost"
label="Success"
></vwc-button>
<vwc-button
connotation="success"
appearance="outlined-light"
label="Success"
></vwc-button>
<vwc-button
connotation="success"
appearance="ghost-light"
label="Success"
></vwc-button>
</div>


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

Alert

  • Represents actions that could have destructive effects on the user’s data
  • Examples: delete or remove

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<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="ghost" label="Alert"></vwc-button>
<vwc-button
connotation="alert"
appearance="outlined-light"
label="Alert"
></vwc-button>
<vwc-button
connotation="alert"
appearance="ghost-light"
label="Alert"
></vwc-button>
</div>


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

Icons

The icon-only button is a separate component in Figma.
  • Examples: toolbar or in the meta slot of a card
  • Clarify the purpose of the button using a tooltip
  • Place ghost appearance buttons inside an action-group

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-action-group role="region" aria-label="Text Alignment">
<vwc-tooltip text="Left align" placement="bottom-start">
<vwc-button
icon="align-left-line"
onclick="onClick(event)"
slot="anchor"
></vwc-button>
</vwc-tooltip>
<vwc-tooltip text="Center">
<vwc-button
aria-pressed="true"
slot="anchor"
icon="align-center-line"
appearance="filled"
onclick="onClick(event)"
></vwc-button>
</vwc-tooltip>
<vwc-tooltip text="Right align" placement="bottom-end">
<vwc-button
icon="align-right-line"
onclick="onClick(event)"
slot="anchor"
></vwc-button>
</vwc-tooltip>
</vwc-action-group>
</div>


<script>
function onClick(event) {
currentPressed = document.querySelector('vwc-button[aria-pressed="true"]');
currentPressed?.removeAttribute('aria-pressed');
currentPressed?.removeAttribute('appearance');
event.currentTarget.setAttribute('aria-pressed', 'true');
event.currentTarget.setAttribute('appearance', 'filled');
}
</script>


<style>
.container {
display: flex;
justify-content: center;
}
</style>


<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button icon="export-line" label="Export"></vwc-button>
<vwc-button
icon="chevron-right-line"
label="Continue"
icon-trailing
></vwc-button>
</div>


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


<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-button icon="chevron-right-line" label="See comments"></vwc-button>
<vwc-button icon="save-line" label="Save" icon-trailing></vwc-button>
</div>


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

Size

The smaller size buttons (condensed and super-condensed) are useful when used inside other components (inside data-grid-cell or action-group for a toolbar) as they take up less space.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-action-group role="region" aria-label="Main toolbar">
<vwc-button size="super-condensed" label="File"></vwc-button>
<vwc-button size="super-condensed" label="Edit"></vwc-button>
<vwc-button size="super-condensed" label="View"></vwc-button>
<vwc-button size="super-condensed" label="Help"></vwc-button>
</vwc-action-group>
</div>
<div class="container">
<vwc-data-grid>
<vwc-data-grid-row row-type="header">
<vwc-data-grid-cell cell-type="columnheader">User</vwc-data-grid-cell>
<vwc-data-grid-cell
class="controls"
cell-type="columnheader"
></vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row>
<vwc-data-grid-cell>Joe</vwc-data-grid-cell>
<vwc-data-grid-cell class="controls">
<vwc-button
appearance="outlined"
size="condensed"
icon="edit-line"
aria-label="Edit"
></vwc-button>
<vwc-button
appearance="outlined"
size="condensed"
icon="delete-line"
aria-label="Delete"
connotation="alert"
></vwc-button>
</vwc-data-grid-cell>
</vwc-data-grid-row>
</vwc-data-grid>
</div>


<style>
.conainer {
display: block;
padding: 8px 0;
}


.controls {
width: 5.75rem;
}
</style>


<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-dialog
open
headline="Delete appointment"
icon="delete-line"
icon-placement="side"
class="dialog"
>
<div slot="body">Are you sure you want to delete this appointment?</div>
<vwc-button
appearance="outlined"
label="Cancel"
slot="action-items"
></vwc-button>
<vwc-button
label="Delete"
appearance="filled"
connotation="alert"
slot="action-items"
></vwc-button>
</vwc-dialog>


<style>
.dialog {
--dialog-max-inline-size: 330px;
}
</style>


<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-dialog
open
headline="Delete appointment"
icon="delete-line"
icon-placement="side"
class="dialog"
>
<div slot="body">Are you sure you want to delete this appointment?</div>
<vwc-button
size="condensed"
appearance="outlined"
label="Cancel"
slot="action-items"
></vwc-button>
<vwc-button
label="Delete"
appearance="filled"
connotation="alert"
slot="action-items"
></vwc-button>
</vwc-dialog>


<style>
.dialog {
--dialog-max-inline-size: 330px;
}
</style>

Ghost buttons

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-action-group>
<vwc-tooltip text="Undo" placement="bottom-start">
<vwc-button icon="reply-line" slot="anchor" size="condensed"></vwc-button>
</vwc-tooltip>
<vwc-button label="Copy" size="condensed"></vwc-button>
<vwc-button label="Paste" size="condensed"></vwc-button>
<vwc-button label="Delete" size="condensed"></vwc-button>
</vwc-action-group>


<style>
.container {
display: flex;
gap: 8px;
padding: 8px 0;
}
</style>


<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="container">
<vwc-tooltip text="Undo" placement="bottom-start">
<vwc-button icon="reply-line" slot="anchor" size="condensed"></vwc-button>
</vwc-tooltip>
<vwc-button label="Copy" size="condensed"></vwc-button>
<vwc-button label="Paste" size="condensed"></vwc-button>
<vwc-button label="Delete" size="condensed"></vwc-button>
</div>


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

Disabled

Try to use progressive disclosure instead of disabled buttons.

Ensure that the user is able to understand why the action is disabled and what they need to do to enable it.