Empty State

UI displayed when no data exists.

html

<div class="empty" role="region" aria-label="No projects yet">
  <span class="empty__icon empty__icon--folder" aria-hidden="true"></span>
  <p class="empty__headline">No projects yet</p>
  <p class="empty__body">Create your first project to see it listed here.</p>
  <button type="button" class="empty__action">Create project</button>
</div>
<style>
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: 280px;
  padding: 32px 20px; border-radius: 12px; border: 1.5px dashed #24143033; font: 14px/1.45 system-ui, sans-serif; color: #241430; }
.empty__icon { width: 44px; height: 44px; border-radius: 12px; background: #D9C8F0; display: grid; place-items: center; margin-bottom: 8px; position: relative; }
.empty__icon::before { font-size: 20px; }
.empty__icon--folder::before { content: "🗀"; }
.empty__icon--search::before { content: "🔍"; }
.empty__icon--inbox::before { content: "📥"; }
.empty__headline { margin: 0; font-weight: 700; font-size: 15px; }
.empty__body { margin: 0; color: #24143099; }
.empty__action { margin-top: 10px; border: none; border-radius: 8px; background: #241430; color: #FAF7F2;
  font: 600 13px system-ui, sans-serif; padding: 8px 16px; cursor: pointer; }
.empty__action:hover { background: #3a2350; }
.empty__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div role="region" aria-label="No projects yet" class="empty-tw empty-tw--folder flex flex-col items-center text-center gap-1.5 max-w-xs px-5 py-8 rounded-xl border-[1.5px] border-dashed border-[#24143033] font-sans text-sm text-[#241430]">
  <span aria-hidden="true" class="empty-tw__icon w-11 h-11 rounded-xl bg-[#D9C8F0] grid place-items-center mb-2"></span>
  <p class="m-0 font-bold text-[15px]">No projects yet</p>
  <p class="m-0 text-[#241430]/60">Create your first project to see it listed here.</p>
  <button type="button" class="mt-2.5 border-0 rounded-lg bg-[#241430] text-[#FAF7F2] font-semibold text-[13px] px-4 py-2 cursor-pointer hover:bg-[#3a2350]">Create project</button>
</div>
<style>
.empty-tw__icon::before { font-size: 20px; }
.empty-tw--folder .empty-tw__icon::before { content: "🗀"; }
.empty-tw--search .empty-tw__icon::before { content: "🔍"; }
.empty-tw--inbox .empty-tw__icon::before { content: "📥"; }
</style>

react

export function EmptyState({
  headline = "No projects yet",
  body = "Create your first project to see it listed here.",
  icon = "folder",
  hasAction = true,
  actionLabel = "Create project",
}) {
  const glyph = { folder: "🗀", search: "🔍", inbox: "📥" }[icon] ?? "🗀";
  return (
    <div role="region" aria-label={headline} style={{ display: "flex", flexDirection: "column", alignItems: "center",
      textAlign: "center", gap: 6, maxWidth: 280, padding: "32px 20px", borderRadius: 12, border: "1.5px dashed #24143033",
      font: "14px/1.45 system-ui, sans-serif", color: "#241430" }}>
      <span aria-hidden="true" style={{ width: 44, height: 44, borderRadius: 12, background: "#D9C8F0",
        display: "grid", placeItems: "center", marginBottom: 8, fontSize: 20 }}>{glyph}</span>
      <p style={{ margin: 0, fontWeight: 700, fontSize: 15 }}>{headline}</p>
      <p style={{ margin: 0, color: "#24143099" }}>{body}</p>
      {hasAction && (
        <button type="button" style={{ marginTop: 10, border: "none", borderRadius: 8, background: "#241430",
          color: "#FAF7F2", fontWeight: 600, fontSize: 13, padding: "8px 16px", cursor: "pointer" }}>{actionLabel}</button>
      )}
    </div>
  );
}