Placeholder

A versatile component for displaying empty states with optional icon, title, subtitle, and action button.

Import

import Placeholder from '@/components/Placeholder';

Features

Customizable empty state display
Support for icons, title, subtitle
Optional action button
Flexible styling options

Props

Prop	Type	Default	Description
`icon`	`IconName`	—	Icon to display above the title
`title`	`string`	—	Main text to display
`subtitle`	`string`	—	Secondary text below the title
`action`	`{ title: string, onPress: () => void }`	—	Optional action button configuration
`className`	`string`	—	Additional classes for the container

Basic Usage

// Simple placeholder with just a title
<Placeholder title="No items found" />
 
// Placeholder with icon and subtitle
<Placeholder
  icon="Search"
  title="No results found"
  subtitle="Try adjusting your search terms"
/>
 
// Placeholder with action button
<Placeholder
  icon="Plus"
  title="No products"
  subtitle="Add your first product to get started"
  action={{
    title: "Add Product",
    onPress: () => navigation.navigate("AddProduct")
  }}
/>

Usage Examples

Empty Notifications

<Placeholder
  icon="Bell"
  title="No Notifications"
  subtitle="You're all caught up!"
/>

Empty Search Results

<Placeholder
  icon="Search"
  title="No Results Found"
  subtitle="Try adjusting your search terms"
  button="Clear Filters"
  href="/search"
/>

Placeholder

On this page