Empty State

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

<template>
  <VSearchableSelect label="Connect number">
    <VEmptyState slot="no-options" icon-decoration="outlined" headline="No numbers">
      <template #icon><VIcon name="phone-number-line" label="Phone number" /></template>
      You do not have any numbers yet.
    </VEmptyState>
  </VSearchableSelect>
</template>

<vwc-searchable-select label="Connect number">
  <vwc-empty-state slot="no-options" icon-decoration="outlined" headline="No numbers">
    <vwc-icon slot="icon" name="phone-number-line" label="Phone number"></vwc-icon>
    You do not have any numbers yet.
  </vwc-empty-state>
</vwc-searchable-select>

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

<template>
  <VDialog open>
    <VEmptyState slot="body" class="empty-state" icon-decoration="outlined" connotation="success" headline="You made it!">
      <template #icon><VIcon name="check-solid" label="Success" /></template>
      Your request was submitted. Waht do you wish to do now?
      <VButton slot="action-items" appearance="outlined" label="continue" />
      <VButton slot="action-items" appearance="filled" connotation="cta" label="Read More" />
    </VEmptyState>
  </VDialog>
</template>

<vwc-dialog open>
  <vwc-empty-state slot="body" class="empty-state" icon-decoration="outlined" connotation="success" headline="You made it!">
    <vwc-icon slot="icon" name="check-solid" label="Success"></vwc-icon>
    Your request was submitted. Waht do you wish to do now?
    <vwc-button slot="action-items" appearance="outlined" label="continue"></vwc-button>
    <vwc-button slot="action-items" appearance="filled" connotation="cta" label="Read More"></vwc-button>
  </vwc-empty-state>
</vwc-dialog>

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

<template>
  <VDataGrid>
    <VDataGridRow role="row" class="header" row-type="header">
      <VDataGridCell cell-type="columnheader" role="columnheader"> data1 </VDataGridCell>
      <VDataGridCell cell-type="columnheader"> data2 </VDataGridCell>
    </VDataGridRow>
  </VDataGrid>
  <VEmptyState class="empty-state" icon-decoration="outlined" headline="No Data">
    <template #icon><VIcon name="search-line" label="Search" /></template>
    There's no data here yet
  </VEmptyState>
</template>

<style scoped>
.empty-state {
  margin-block-start: 32px;
}
</style>

<vwc-data-grid>
  <vwc-data-grid-row role="row" class="header" row-type="header">
    <vwc-data-grid-cell cell-type="columnheader" role="columnheader"> data1 </vwc-data-grid-cell>
    <vwc-data-grid-cell cell-type="columnheader"> data2 </vwc-data-grid-cell>
  </vwc-data-grid-row>
</vwc-data-grid>
<vwc-empty-state class="empty-state" icon-decoration="outlined" headline="No Data">
  <vwc-icon slot="icon" name="search-line" label="Search"></vwc-icon>
  There's no data here yet
</vwc-empty-state>

<style>
  .empty-state {
    margin-block-start: 32px;
  }
</style>