Empty

An empty state with a specific reason and a useful recovery action.

View source Explore Storybook

Interactive preview

Live specimenTry the component

No projects yet

Create your first project to give your team a shared workspace.

No matching records

Try another search or clear your filters.

You need access

Ask your workspace owner for permission to see this section.

Could not load records

Your data is still safe. Check the connection and retry.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add empty

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Empty title="No matching records" description="Try another search or clear the filters.">
  <Button onClick={clearFilters}>Clear filters</Button>
</Empty>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`title`	`ReactNode`	`required`
`description / icon`	`ReactNode`	`—`
`children`	`ReactNode`	`recovery actions`

Accessibility

Empty provides static content, not a live announcement. Announce a result count through an application status region after filtering. Distinguish first use, no results, missing permission, and a failed request in your copy and actions. Icons are decorative; provide accessible action names. Ref targets the div.