Skip to content
Sisyphos UI

Empty State

Standardized empty result UI with illustration slot, title, description, and action.

Data Display·Available inReactVueAngular·View as Markdown

Preview

tsx

No results found

Try changing the filters or search for a different term.

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

No results found

Try changing the filters or search for a different term.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { EmptyState, Button } from "@sisyphos-ui/react";

export const NoResults = () => (
  <EmptyState
    bordered
    title="Nothing here yet"
    description="Once you create an item it'll show up here."
    actions={<Button>New item</Button>}
  />
);

With custom icon

Pass any ReactNode as `icon` to reinforce the message.

tsx

Inbox zero

You're all caught up. New items will show up here.

Sizes

`size` tunes the vertical density.

tsx

size="sm"

Same content, different density.

size="md"

Same content, different density.

size="lg"

Same content, different density.

API

PropTypeDefaultDescription
iconReactNode—Decorative icon or illustration rendered above (or beside) the text.
titleReactNode—Heading rendered as an `<h3>`.
descriptionReactNode—Supporting copy rendered below the title.
actionsReactNode—Call-to-action slot — typically one or two `Button` elements.
size"sm" | "md" | "lg""md"Size/density scale.
borderedbooleanfalseAdds a dashed border and subtle background.
variant"block" | "inline""block"`block` stacks icon above text; `inline` is a compact horizontal row for modals, cards, and filter rows.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

  • The root exposes role="status", so the empty message is politely announced when it appears (e.g. after a filter returns no results).
  • The icon slot is aria-hidden="true" — decorative artwork is never announced.
  • The title renders as an <h3> heading, keeping the empty view reachable via screen-reader heading navigation.
Need more?View on npm →
Was this page helpful?