Empty State

The Empty State component is used to display a message when there is no data to show.

Headline

Use the headline attribute add a headline to the empty state.

Icon

Use the icon slot to display an icon from the icon library on the Empty State.

<script setup lang="ts">
import { VEmptyState, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VEmptyState>
    <template #icon><VIcon name="search-line" label="Search" /></template>
  </VEmptyState>
</template>

Connotation

Set the connotation attribute to change the Empty State’s connotation.

The icon-decoration prop is deprecated (as of 05/25) with the previous outline style now becoming the default and only icon styling. icon-decoration will be removed from the API in a future major release. This will be communicated when it’s removal becomes a release candidate at the end of the support period.

<script setup lang="ts">
import { VEmptyState, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="wrapper">
    <VEmptyState headline="Accent connotation">
      <template #icon><VIcon name="search-line" label="Search" /></template>
      No results
    </VEmptyState>
    <VEmptyState headline="Success connotation" connotation="success">
      <template #icon><VIcon name="check-solid" label="Success" /></template>
      No results
    </VEmptyState>
    <VEmptyState headline="Alert connotation" connotation="alert">
      <template #icon><VIcon name="error-solid" label="Error" /></template>
      No results
    </VEmptyState>
    <VEmptyState headline="Cta connotation" connotation="cta">
      <template #icon><VIcon name="sparkles-solid" label="Call to action" /></template>
      No results
    </VEmptyState>
    <VEmptyState headline="Information connotation" connotation="information">
      <template #icon><VIcon name="envelope-solid" label="Information" /></template>
      No results
    </VEmptyState>
    <VEmptyState headline="Warning connotation" connotation="warning">
      <template #icon><VIcon name="warning-solid" label="Warning" /></template>
      No results
    </VEmptyState>
  </div>
</template>

<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: flex-start;
}
</style>

<div class="wrapper">
  <vwc-empty-state headline="Accent connotation">
    <vwc-icon slot="icon" name="search-line" label="Search"></vwc-icon>
    No results
  </vwc-empty-state>
  <vwc-empty-state headline="Success connotation" connotation="success">
    <vwc-icon slot="icon" name="check-solid" label="Success"></vwc-icon>
    No results
  </vwc-empty-state>
  <vwc-empty-state headline="Alert connotation" connotation="alert">
    <vwc-icon slot="icon" name="error-solid" label="Error"></vwc-icon>
    No results
  </vwc-empty-state>
  <vwc-empty-state headline="Cta connotation" connotation="cta">
    <vwc-icon slot="icon" name="sparkles-solid" label="Call to action"></vwc-icon>
    No results
  </vwc-empty-state>
  <vwc-empty-state headline="Information connotation" connotation="information">
    <vwc-icon slot="icon" name="envelope-solid" label="Information"></vwc-icon>
    No results
  </vwc-empty-state>
  <vwc-empty-state headline="Warning connotation" connotation="warning">
    <vwc-icon slot="icon" name="warning-solid" label="Warning"></vwc-icon>
    No results
  </vwc-empty-state>
</div>

<style>
  .wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: flex-start;
  }
</style>