EmptyState
Placeholder for empty content areas with icon, title, description, and call-to-action. Use when no data is available or a search returns no results.
Installation
# Install @opencosmos/ui to use EmptyState
pnpm add @opencosmos/uiPreview
Loading preview...
Customize
*— Primary message
— Secondary explanation text
— Size variant
Usage
Import
import { EmptyState } from '@opencosmos/ui';Example
<EmptyState>
Content
</EmptyState>Eject
Copy this component into your project for full customization
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | text | "No results found" | Primary message |
| description | text | "Try adjusting your search or filter to find what you're looking for." | Secondary explanation text |
| size | sm | default | lg | "default" | Size variant |
Accessibility
- Uses role="status" for screen reader announcements
- Semantic <h3> heading for title
- Icon is aria-hidden (decorative)
- Focus management on CTA button when present
Examples
No Results
No results found
Try adjusting your search or filter.
Empty Inbox
No messages yet
When you receive messages, they will appear here.
Small
Nothing here
Code Examples
Basic Usage
Simple empty state with icon and description
import { EmptyState } from '@opencosmos/ui'
import { Inbox } from 'lucide-react'
<EmptyState
icon={<Inbox />}
title="No messages yet"
description="When you receive messages, they will appear here."
/>With Action
Empty state with a call-to-action button
import { EmptyState, Button } from '@opencosmos/ui'
import { Plus } from 'lucide-react'
<EmptyState
icon={<Plus />}
title="No projects"
description="Get started by creating your first project."
action={<Button>Create Project</Button>}
/>