Empty state

A useful next step when there is nothing to show yet.

import { Button } from "@/forma/arc/button/button";

Base

In FORMA

Liegt in kit/arc/empty-state und ist über @/forma/arc/empty-state/empty-state erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

Empty lists, zero search results, and first-run views.
A view that should morph between states, such as empty and success, by changing props.

When not to use

Use skeleton while data is still loading.
Use alert for errors inside a page that still has content.
Use onboarding-checklist when first-run needs several steps.

Usage

import { Search } from "@/forma/icons";
import { Button } from "@/forma/arc/button/button";
import { EmptyState } from "@/forma/arc/empty-state/empty-state";

export function NoResults({ onClear }: { onClear: () => void }) {
  return (
    <EmptyState
      icon={<Search size={24} />}
      title="No matches"
      description="Try a shorter search or clear the filters."
      action={<Button variant="secondary" onClick={onClear}>Clear filters</Button>}
    />
  );
}

API reference

EmptyState

A centered icon, title, description, and optional action for empty views.

Prop	Type	Default	Description
`title` (required)	`string`	–	Headline. A new title rises in while the old one leaves.
`description` (required)	`string`	–	One or two sentences on why it is empty and what to do.
`action`	`ReactNode`	–	Call to action, usually a button.
`icon`	`ReactNode`	`<Folder />`	Leading icon. A different icon component crossfades in.
`className`	`string`	–	Class for the root section.
`label`	`string`	–	Accessible name for the section region.

Accessibility

Renders a section with an h3 title; pass label to name the region.
The icon is aria-hidden.
Outgoing copy is hidden from assistive tech while it fades.

Motion

Changing title or description rolls the copy in place while the block height springs to fit.
A new icon pops in with a short blur.
Reduced motion swaps copy with a fade and snaps height; the icon's idle animation stops.

Responsive behavior

Padding scales with the viewport between fixed bounds, and the description caps at 18rem so lines stay short.
Actions wrap and center, so two buttons stack on narrow screens.

Performance

One ResizeObserver drives the height spring; the icon's idle animation is CSS and stops under reduced motion.

Notes for AI

Use for empty lists, zero search results, and first-run views. Use skeleton while data is loading.
Keep it mounted and change its props to morph between states such as empty and success.

Also in cards

Card: A contained group of related content and actions.
Metric card: A compact summary for a number that needs context.

Guidance for AI tools

Empty state: A useful next step when there is nothing to show yet. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückMetric card WeiterTree view

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.