Appearance

Empty State ​

The EmptyState component is used to display a message or image when there is no content to show. It provides a user-friendly way to communicate to the user that there is no data available.

Basic Usage ​

To use the EmptyState component, simply import it and use it in your template. You can pass a custom title and subtitle via title and subtitle props and slots.

No results

please try a different filter

vue
<EmptyState title="No results" subtitle="please try a different filter" />

Illustration ​

A vignette illustration can be rendered in the empty state as well by setting the illustation name to the vignette prop.

No account linked

Add or link an existing bank account to begin making transactions

vue
  <EmptyState
    title="No account linked"
    subtitle="Add or link an existing bank account to begin making transactions"
    vignette="bank">
  </EmptyState>

CTA ​

The #button slot can be used to add a call-to-action to the empty state.

No search results

Your search didn't find any results

vue
  <EmptyState vignette="search" class="tw-bg-white">
    <template #title><h3>No search results</h3></template>
    <template #subtitle><p class="tw-mb-8">Your search didn't find any results</p></template>
    <template #button>
      <Button class="tw-mb-4">Reset search</Button>
    </template>
  </EmptyState>

Footnote ​

An additional footnote can be appended for an any ancillary info included at the bottom (below the cta if provided). You can use the footnote prop to use the default styling, or the #footnote slot for a bit more flexibility.

Vendor integration

Connect your account to Vendor to unlock features.

By continuing, you agree to the Terms of Service.

vue
  <EmptyState vignette="integrations" class="tw-bg-white">
    <template #title><h3>Vendor integration</h3></template>
    <template #subtitle><p class="tw-mb-8">Connect your account to Vendor to unlock features</p></template>
    <template #button>
      <Button class="tw-mb-4">Setup up Vendor</Button>
    </template>
    <template #footnote>
      <p class="tw-mb-0 tw-text-xs">By continuing, you agree to the <a href="#">Terms of Service</a>.</p>
    </template>
  </EmptyState>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.