empty-state placeholder no-data cta action onboarding empty-state placeholder action button cta create onboarding show empty state with action button display no-data message with CTA
Empty State with Action
Fetch pattern JSON:
curl https://webspire.de/patterns/empty-state/with-action.json with-action.html
<div class="ws-empty-state mx-auto max-w-md rounded-xl border-2 border-dashed border-[var(--ws-empty-state-border)] bg-[var(--ws-empty-state-bg)] px-6 py-12 text-center">
<div class="text-4xl">🚧</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-empty-state-text)]">No projects found</h3>
<p class="mt-2 text-sm text-[var(--ws-empty-state-text-soft)]">Create your first project to get started. You can always add more later.</p>
<a href="#" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-[var(--ws-empty-state-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-empty-state-action-text)] transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
New project
</a>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
empty-stateplaceholderno-datactaactiononboarding
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Visual indicator such as an emoji or SVG icon. |
| heading | Yes | Short title describing the empty state. |
| description | Yes | Brief explanation or guidance text. |
| action | Yes | CTA button to guide the user toward the next step. |
Enhanced empty state that adds a call-to-action button below the description. Guides users to take action when a content area is empty, such as creating their first item.