EmptyState

EmptyState is a centered placeholder for an empty list or view. Every slot is optional. Pass an icon, title, description, and an action (typically a Button) to tell the user what’s missing and how to fix it. It carries no brand of its own; text and icon colors resolve from the host’s tokens. The preview below is the real component from @nimblebrain/synapse/ui, live.

import { Button, EmptyState } from "@nimblebrain/synapse/ui";

<EmptyState
  title="No tasks yet"
  description="Create your first task to get started."
  action={<Button size="sm">New task</Button>}
/>;

Slots

Each slot is independent. Lead with an icon for a lighter touch, add an action when there’s a clear next step, or use title alone for a terse placeholder.

<EmptyState
  icon={<span>📭</span>}
  title="No tasks yet"
  description="Everything you add will show up here."
  action={<Button size="sm">New task</Button>}
/>

Props

EmptyState extends HTMLAttributes<HTMLDivElement> (minus title), so className, style, and other div attributes pass straight through.

Prop	Type	Default
icon	ReactNode	None
title	ReactNode	None
description	ReactNode	None
action	ReactNode	None
…rest	HTMLAttributes<HTMLDivElement>	None

Related

• Button: the usual action for an empty state.
• Spinner: show while the view is still loading.