Skip to content
oks-ui

EmptyState component

EmptyState is a centered placeholder for an empty list or a no-match search result — an icon, a title, a short description, and one or more actions.

Data Display6 propsAccessibility notes

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways EmptyState actually gets used — each one a real, self-contained example.

Empty list

A centered placeholder for a list with nothing in it yet — icon, title, description, and a primary action.

<EmptyState
  icon={<InboxIcon />}
  title="No invoices yet"
  description="Invoices you create will show up here."
  actions={<Button color="primary">New invoice</Button>}
/>

No search results

The other common case: a search or filter that matched nothing, with a way to clear it.

<EmptyState
  icon={<SearchIcon />}
  title="No matches"
  description="No customers match “astro”. Try a different search."
  actions={<Button variant="soft">Clear search</Button>}
/>

Compact size

size="sm" fits an empty state inside a card or a small panel without dominating it.

<EmptyState
  size="sm"
  icon={<BellIcon />}
  title="You're all caught up"
  description="No new notifications."
/>

Example

empty-state.tsx
<EmptyState
  icon={<InboxIcon />}
  title="No invoices yet"
  description="Invoices you create will show up here."
  actions={<Button color="primary">New invoice</Button>}
/>

Props

The full public API for EmptyState. Every prop is stable and intentionally typed.

Content

title

ReactNode

default: —

Required. The headline.

description

ReactNode

default: —

Supporting sentence.

icon

ReactNode

default: —

Rendered in a tinted circular tile.

actions

ReactNode

default: —

Buttons / links below the description.

Appearance

size

"sm" | "md" | "lg"

default: md

Padding + icon + title scale.

Styling

classNames

{ base?, icon?, title?, description?, actions? }

default: —

Slot class overrides.

Accessibility

  • The icon is decorative (`aria-hidden`); the title carries the meaning and is a real heading.
  • Actions are ordinary buttons/links in the natural tab order.

More in Data Display