Empty State

Empty state components guide users when there is no content to display — for first-use, empty data, or error screens.

💡 TEmpty has no built-in background color — its visual appearance depends on the parent page background. In practice, it is typically placed inside a white-background card or page area.

---

Basic Usage

Use title and subtitle props for a simple empty state prompt.

<TEmpty title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for." />

---

With Icon

Use the icon slot to add a @tabler/icons-vue icon.

<TEmpty title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for.">
    <template #icon>
        <IconMoodSad :size="48" />
    </template>
</TEmpty>

---

With Action Button

Use the action slot to add a call-to-action button.

View Code

<TEmpty title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for.">
    <template #icon>
        <IconSearch :size="48" />
    </template>
    <template #action>
        <a href="#" class="btn btn-primary">
            <IconSearch :size="24" />
            Search again
        </a>
    </template>
</TEmpty>

---

Bordered

Enable bordered to add a border around the empty state container.

<TEmpty bordered title="No results found" subtitle="Try adjusting your search or filter to find what you're looking for.">
    <template #icon>
        <IconMoodSad :size="48" />
    </template>
</TEmpty>

---

With Illustration

Use the img slot for SVG illustrations to make the empty state more brand-friendly.

View Code

<TEmpty title="Invoices are managed from here" subtitle="Try adjusting your search or filter to find what you're looking for.">
    <template #img>
        <!-- Place any SVG illustration, recommend using Tabler Illustrations -->
        <svg class="img" ...>...</svg>
    </template>
    <template #action>
        <a href="#" class="btn btn-primary">
            <IconPlus :size="24" />
            New invoice
        </a>
    </template>
</TEmpty>

---

Custom Title & Subtitle

Titles and subtitles can be passed as plain-text props or as rich-content slots. Slots take priority over props.

View Code

<TEmpty>
    <template #icon>
        <IconFileText :size="48" />
    </template>
    <template #title>
        <strong>Custom Title</strong>
    </template>
    <template #subtitle>
        <em>Custom subtitle with <a href="#">rich text</a> support</em>
    </template>
</TEmpty>

---

API

Props

Prop	Type	Default	Description
title	string	''	Title text (overridden by title slot)
subtitle	string	''	Subtitle text (overridden by subtitle slot)
bordered	boolean	false	Add border to the container

Slots

Slot	Description
icon	Small icon area, recommend @tabler/icons-vue
img	Illustration / large image area
header	Large title area (e.g. "404" number)
title	Title — slot takes priority over title prop
subtitle	Subtitle — slot takes priority over subtitle prop
action	Action buttons area
default	Free slot, no wrapper