No reviews yet
Finish a book, then write the first one.
<script setup lang="ts">
import { Button, Empty } from '@hina-ui/vue'
</script>
<template>
<Empty title="No reviews yet" description="Finish a book, then write the first one." class="w-96">
<template #actions>
<Button size="sm">Write a review</Button>
</template>
</Empty>
</template>
Usage
import { Empty } from '@hina-ui/vue'
title says in one sentence why the area is empty and description adds what to do next. Icon, text and actions stack in the centre from top to bottom, and the component fills the width of its container.
Your shelf is empty
Books you bookmark will show up here.
<script setup lang="ts">
import { Empty } from '@hina-ui/vue'
</script>
<template>
<Empty
title="Your shelf is empty"
description="Books you bookmark will show up here."
class="w-96"
/>
</template>
Examples
Actions
The actions slot holds the actions that lead out of the empty state, usually one primary button and perhaps a secondary one.
No lists yet
Gather the books you want to read together.
<script setup lang="ts">
import { Button, Empty } from '@hina-ui/vue'
</script>
<template>
<Empty
title="No lists yet"
description="Gather the books you want to read together."
class="w-96"
>
<template #actions>
<Button size="sm">New list</Button>
<Button size="sm" variant="ghost" tone="neutral">About lists</Button>
</template>
</Empty>
</template>
Icon
The default icon is an inbox. Use the icon slot for one that fits the situation, such as a crossed-out magnifier for a search without results; set it to false to show no icon.
No matches
Try another keyword.
No matches
Try another keyword.
<script setup lang="ts">
import { SearchX } from '@lucide/vue'
import { Empty, Inline } from '@hina-ui/vue'
</script>
<template>
<Inline gap="lg" align="start">
<Empty title="No matches" description="Try another keyword." class="w-72">
<template #icon><SearchX class="text-muted size-8" /></template>
</Empty>
<Empty title="No matches" description="Try another keyword." :icon="false" class="w-72" />
</Inline>
</template>
Illustration
The icon slot can also hold an image. Slot content gets no round background, and its size is up to the content.
Your inbox is empty
New notifications land here first.
<script setup lang="ts">
import { Button, Empty, Image } from '@hina-ui/vue'
</script>
<template>
<Empty title="Your inbox is empty" description="New notifications land here first." class="w-96">
<template #icon>
<Image src="/avatars/peek.webp" :ratio="1" class="size-24 rounded-full" />
</template>
<template #actions>
<Button size="sm" variant="soft" tone="neutral">Notification settings</Button>
</template>
</Empty>
</template>
Sizes
Three sizes change the icon, text and padding together: sm for small areas inside cards, md by default, lg for a whole empty page.
No comments
Say something.
No comments
Say something.
No comments
Say something.
<script setup lang="ts">
import { Empty, Stack } from '@hina-ui/vue'
</script>
<template>
<Stack gap="lg" class="w-96">
<Empty size="sm" title="No comments" description="Say something." />
<Empty title="No comments" description="Say something." />
<Empty size="lg" title="No comments" description="Say something." />
</Stack>
</template>
Inside a panel
As the empty state of a list or table, place it directly in the body of a Panel or a Card.
Recent activity
0Nothing happened in the last seven days
Follow a few people and this will fill up.
<script setup lang="ts">
import { Button, Empty, Panel } from '@hina-ui/vue'
</script>
<template>
<Panel title="Recent activity" :count="0" class="w-96">
<template #actions>
<Button size="sm" variant="ghost" tone="neutral">All</Button>
</template>
<Empty
size="sm"
title="Nothing happened in the last seven days"
description="Follow a few people and this will fill up."
/>
</Panel>
</template>
Accessibility
- The icon or illustration is decorative and hidden from assistive technology; title and description are plain text.
- Buttons in the actions area keep their own accessible names; nothing extra is needed.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Title |
description | string | — | Text under the title |
icon | boolean | true | Whether to show the default icon |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
class | string | — | Extra classes on the root element |
Slots
| Slot | Description |
|---|---|
| default | Extra content below the text |
icon | An icon or illustration replacing the default icon |
actions | Actions at the bottom |