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.
No results
please try a different filter
<EmptyState title="No results" subtitle="please try a different filter" />Illustration Empty State
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
<EmptyState
title="No account linked"
subtitle="Add or link an existing bank account to begin making transactions"
vignette="bank">
</EmptyState>Slots in Empty State
As an alternative to title and subtitle props you may use the corresponding slots of #title and #subtitle. You can also use the button slot to add a CTA to the empty state.
No search results
Your search didn't find any results
<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>API
See the documentation below for a complete reference to all the props and classes available to the components mentioned here.