Fluxo UIFluxo UIv0.4.1

Empty State

A reusable placeholder for empty data, error, success, and first-run states.

Basic Usage

Default Empty State

Title + description + primary and secondary actions.

No items yet

Get started by creating your first item.
import { EmptyState } from 'fluxo-ui';

<EmptyState
  title="No items yet"
  description="Get started by creating your first item."
  action={{ label: 'Create item', onClick: () => {} }}
  secondaryAction={{ label: 'Learn more', href: '#' }}
/>

Variants

Variants

Six pre-styled variants pick sensible default icons and tones.

No items yet

Get started by creating one.

No matches

Try a different search term.

Something went wrong

We couldn't load your data.

All caught up!

You're all set for the day.

Access denied

You don't have permission to view this.

Heads up

This is an informational state.
<EmptyState variant="default" title="No items yet" description="Get started by creating one." />
<EmptyState variant="noResults" title="No matches" description="Try a different search term." />
<EmptyState variant="error" title="Something went wrong" description="We couldn't load your data." action={{ label: 'Retry', onClick: () => {} }} />
<EmptyState variant="success" title="All caught up!" description="You're all set for the day." />
<EmptyState variant="restricted" title="Access denied" description="You don't have permission to view this." />
<EmptyState variant="info" title="Heads up" description="This is an informational state." />

Layouts

Vertical & Horizontal

Vertical centers content; horizontal places the visual on the left and the text/actions on the right (collapses to vertical on narrow viewports).

No documents yet

Upload a file or create a new document to get started.

Inbox zero

You're all caught up! Check back later for new messages.
<EmptyState layout="vertical" title="No items" />
<EmptyState layout="horizontal" title="No items" />

Sizes

Sizes

Three sizes scale the icon, padding, and typography proportionally.

Size: sm

A short description that adapts to the chosen size.

Size: md

A short description that adapts to the chosen size.

Size: lg

A short description that adapts to the chosen size.
<EmptyState size="sm" title="Compact" />
<EmptyState size="md" title="Comfortable" />
<EmptyState size="lg" title="Spacious" />

Illustration

Custom Illustration

Pass any ReactNode as the illustration slot.

Nothing to show — yet

Connect a data source to start exploring metrics, charts, and insights.
<EmptyState
  title="Custom illustration"
  description="Replace the icon with any ReactNode."
  illustration={
    <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="80" r="50" fill="var(--eui-primary-subtle)" stroke="var(--eui-primary-border)" />
      <path d="M70 75 L90 95 L130 60" stroke="var(--eui-primary)" strokeWidth="6" fill="none" />
    </svg>
  }
  action={{ label: 'Get started', onClick: () => {} }}
/>

Import

import { EmptyState } from 'fluxo-ui';
import type { EmptyStateProps, EmptyStateVariant, EmptyStateSize, EmptyStateLayout } from 'fluxo-ui';

Props

titlereq
string

Heading text

description
string | ReactNode

Supporting text below the title

icon
IconComponent | ReactElement

Small leading icon (overrides the variant default)

illustration
ReactNode

Large slot for an illustration or image. Replaces the icon when both are set

action
{ label, onClick?, variant?, loading?, disabled?, href? }

Primary action rendered as a Button

secondaryAction
{ label, onClick?, variant?, href? }

Secondary action rendered as a plain Button

layout
'vertical' | 'horizontal'"'vertical'"

Vertical centers content; horizontal places illustration left and text/action right (collapses on narrow viewports)

size
'sm' | 'md' | 'lg'"'md'"

Controls overall scale (font sizes, illustration max-width, padding)

variant
'default' | 'noResults' | 'error' | 'success' | 'restricted' | 'info'"'default'"

Picks default icons and colors when neither icon nor illustration is provided

id
string

HTML id attribute

className
string

Additional CSS classes

headingLevel
1 | 2 | 3 | 4 | 5 | 6"3"

Controls the heading tag for the title to fit the document outline

Features

Six Variants

default, noResults, error, success, restricted, info — each with sensible icons and colors.

Two Layouts

Vertical for centered states; horizontal for inline placement (collapses on mobile).

Custom Illustration

Drop in any ReactNode — SVG, image, or composed UI — to replace the default icon.

Heading Outline

headingLevel keeps the document outline correct (h1–h6).