EmptyState — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add empty-state

Or install the whole package and import it

pnpm add orn-ui
import { EmptyState } from 'orn-ui/empty-state';

Depends on:core (theme + icons)

Usage

when to use — A list or a search that returned nothing. Not for errors — those are Alert or a retry state.
title / description — The title names what is missing; the description says what to do about it.
iconName / icon — `search` by default. Change it so the icon matches what is empty.

Demo clip not recorded yet — see MEDIA.md

Variants

Search

<EmptyState title="No invoices found" description="Try a different search term" iconName="search" />

Custom icon

<EmptyState title="No clients yet" description="Add your first client to get started" iconName="info" />

Full demo source

const variants: VariantDef[] = [
  { label: 'Search', content: <EmptyState title="No invoices found" description="Try a different search term" iconName="search" /> },
  { label: 'Custom icon', content: <EmptyState title="No clients yet" description="Add your first client to get started" iconName="info" /> },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`title?`	`string`	—	—
`description?`	`string`	—	—
`iconName?`	`IconName`	search	—
`icon?`	`ReactNode`	—	—
`style?`	`ViewStyle`	—	—