EEnterUI
DocsComponentsThemesDonation
Get Started
      • Progress
      • EmptyState
EnterUIDocsProduct OperationsFeedback StatusProgress and EmptyEmptyState
Product OperationsUpdated 6 May 2026

EmptyState

A quiet zero-state surface for missing data or first-run flows.

EmptyState defines how EnterUI handles a quiet zero-state surface for missing data or first-run flows, including default structure, accessible states, and token-driven styling.

#Default usage

Empty state

Keep copy specific and actions direct.

No records selected

Choose a component or adjust filters to inspect usage.

Code
<EmptyState
  title="No records selected"
  description="Choose a component or adjust filters to inspect usage."
  action={<Button variant="secondary">Clear filters</Button>}
/>

#Import

Code
import { Button, EmptyState } from "@froggdesign/enter-ui-react";

#Accessibility

EmptyState is regular document content. Use clear headings and actions that explain the next useful step.

#API

  • title, description, icon, and action accept React nodes.
  • Extends div props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousProgress
NextActivityFeed

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling