Application

Empty state

Zero-data panel with icon, copy, and next-step actions.

simple6 in Application

EmptyButton

Demo

No projects yet
Create your first project to see analytics, deploys, and team activity here.
---
import { Empty, Button } from "astro-ui";
---

<Empty>
  <span slot="media" class="block-empty-icon" aria-hidden="true">◈</span>
  <span slot="title">No projects yet</span>
  <span slot="description">
    Create your first project to see analytics, deploys, and team activity here.
  </span>
  <Button size="sm">New project</Button>
  <Button size="sm" variant="ghost" href="/docs/get-started/">Read the guide</Button>
</Empty>

<style is:global>
  .block-empty-icon { display: grid; place-items: center; font-size: 1.75rem; color: var(--ui-primary); }
</style>

Zero new CSS — every element reads the library tokens. Switch to the Code tab and hit Copy for paste-ready source; form ids here are prefixed per instance so multiple copies can coexist on one page.