Empty state with optional icon, title, description, and action
Empty
Empty state with optional icon, title, description, and action
Same BEM classes and behavior as Astro, Svelte, and React.
Add this component
The command below includes <strong>Empty</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
bashbash
npx rizzo-css add Empty
bashbash
pnpm dlx rizzo-css add Empty
bashbash
npx rizzo-css add Empty
bashbash
bunx rizzo-css add Empty
Live examples
Vue
No items yet
Get started by adding your first item.
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
astroastro
---
import Empty from '../components/astro/Empty.astro';
---
<Empty title="No items yet" description="Get started by adding your first item.">
<button type="button" slot="action" class="btn btn-primary">Add item</button>
</Empty>
htmlhtml
<!-- Rizzo CSS. No script needed. BEM: empty, empty__title, empty__description, empty__action. -->
<div class="empty">
<h3 class="empty__title">No items yet</h3>
<p class="empty__description">Get started by adding your first item.</p>
<div class="empty__action"><button type="button" class="btn btn-primary">Add item</button></div>
</div>
sveltesvelte
<script>
import { Empty } from '$lib/rizzo';
</script>
<Empty title="No items yet" description="Get started by adding your first item.">
<button type="button" class="btn btn-primary">Add item</button>
</Empty>
vuevue
<script setup>
import Empty from '@/components/rizzo/Empty.vue';
import Button from '@/components/rizzo/Button.vue';
</script>
<template>
<Empty>
<h3 class="empty__title">No items yet</h3>
<p class="empty__description">Get started by adding your first item.</p>
<div class="empty__action">
<Button variant="primary">Add item</Button>
</div>
</Empty>
</template>
tsxtsx
import { Empty } from './components/react';
import { Button } from './components/react';
<Empty
title="No items yet"
description="Get started by adding your first item."
action={<Button variant="primary">Add item</Button>}
/>
npm 
pnpm 
yarn 
bun