Skip to content

EmptyState

Fills a card or table that has nothing to show yet, and says what to do next.

FeedbackServer-rendered

Examples

First run

One primary action, plus an optional docs link.

No servers yet

Add an MCP server and your agents can call its tools through Switchboard.

Read the guide
Example
<EmptyState
  icon="server"
  title="No servers yet"
  body="Add an MCP server and your agents can call its tools through Switchboard."
  action={<>
    <Button icon="plus">Add server</Button>
    <Link href="/docs/servers" external>Read the guide</Link>
  </>}
/>

Small, waiting

size="sm" for a panel inside a page.

Waiting for the first request…

Calls from your agents show up here as they happen.

Example
<EmptyState
  size="sm"
  icon="activity"
  title="Waiting for the first request…"
  body="Calls from your agents show up here as they happen."
/>

Usage

Usage
import { EmptyState } from '@switchboard/ui'

{servers.length ? <ServersTable servers={servers} /> : (
  <EmptyState icon="server" title="No servers yet" body="…" action={…} />
)}

Props

Every component also takes mix, for css() and mixins applied after its own style.

EmptyState

EmptyState props
PropTypeDefaultDescription
title*RemixNode–What is missing: "No servers yet".
iconIconName'inbox'Shown in a 40px accent tile.
bodyRemixNode–One sentence saying what to do. children also render here.
actionRemixNode–Usually one primary Button, plus an optional docs Link.
size'md' | 'sm''md'sm has less padding, for panels.

Also accepts every <div> attribute.

Accessibility

  • Title and body are plain paragraphs; the icon is decorative.
  • When it replaces content after a filter, announce the change, e.g. a role="status" result count.

Guidance

Do

  • Say what will appear here and how to get it.
  • Offer the action that fills it.

Don’t

  • Show an empty state while data is loading; use Skeleton.
  • Write jokes or "Oops"; keep it plain.