Empty State

A standardized placeholder screen displayed when there is no data to show.

Import

tsx

import { EmptyState } from '@tac-ui/native';

Playground

Interactively configure the EmptyState props below.

No files found

Upload your first file to get started.

Title

Description

tsx

<EmptyState
  title="No files found"
  description="Upload your first file to get started."
/>

With Icon and Action

Full empty state with icon, title, description, and a call-to-action button — the icon is centered inside a blurred circular container.

No files found

Upload your first file to get started. Supported formats include PDF, PNG, and JPEG.

tsx

import { Inbox } from '@tac-ui/icon-native';

<EmptyState
  icon={<Inbox size={48} color="#71717a" />}
  title="No files found"
  description="Upload your first file to get started. Supported formats include PDF, PNG, and JPEG."
  action={
    <Button size="sm" onPress={() => console.log('upload')}>Upload File</Button>
  }
/>

Minimal

Simple empty state with just a title and description — no icon or action — suitable for compact list placeholders.

Nothing here yet

Check back later or adjust your filters.

tsx

<EmptyState
  title="Nothing here yet"
  description="Check back later or adjust your filters."
/>

Visibility Toggle

The visible prop controls whether the component is rendered. When set to false, the component animates out before unmounting.

tsx

const [visible, setVisible] = useState(true);

<Button onPress={() => setVisible(v => !v)}>
  Toggle Empty State
</Button>

<EmptyState
  visible={visible}
  icon={<SearchIcon size={48} color="#71717a" />}
  title="No results found"
  description="Try adjusting your search or filters."
  action={<Button size="sm" variant="outline">Clear filters</Button>}
/>

API Reference

Prop	Type	Default	Description
title	string	-	Primary heading text. Required.
icon	React.ReactNode	-	Optional icon or illustration displayed above the title.
description	string	-	Optional descriptive text below the title.
action	React.ReactNode	-	Optional action button(s) rendered below the description.
visible	boolean	true	When false, the component animates out with fade and slide-up before unmounting.
style	ViewStyle	-	Additional React Native style applied to the container.