Components
Empty
A component for displaying empty states when data is missing, with customizable content and actions.
Overview
The Empty component provides a consistent way to display empty states throughout your application. It's designed to replace normal content when data is missing, offering users clear context and actionable next steps.
Usage
Examples
Basic Empty State
A complete empty state with icon, title, description, and action button.
Example Title Text
Example of Description Text.
Features
- Composable Structure: Modular components for flexible layouts
- Default Icon: Built-in UFO icon with consistent styling
- Customizable Content: Flexible title, description, and action areas
- Accessibility: Built-in accessibility support
- Responsive Design: Adapts to different screen sizes
- Consistent Styling: Matches design system standards
Props
Empty (Main Container)
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Empty state content components |
className | string | undefined | Additional CSS classes |
Empty.Icon
Prop | Type | Default | Description |
---|---|---|---|
className | string | undefined | Additional CSS classes for the icon |
Empty.Title
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Title text content |
className | string | undefined | Additional CSS classes |
Empty.Description
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Description text content |
className | string | undefined | Additional CSS classes |
Empty.Actions
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Action buttons or links |
className | string | undefined | Additional CSS classes |
Structure
The Empty component is composed of several subcomponents that work together:
- Empty - The main container component
- Empty.Icon - Default UFO icon with styling
- Empty.Title - Main heading text for emphasis
- Empty.Description - Explanatory text about the empty state
- Empty.Actions - Container for action buttons or links
Styling
The Empty component includes default styling with:
- Centered layout with consistent spacing
- Typography hierarchy for title and description
- Icon styling with appropriate sizing
- Action area with button spacing
- Responsive design
- Dark mode support
Custom Styling
You can customize the appearance using className props:
Accessibility
The Empty component is built with accessibility in mind:
- Semantic HTML: Uses appropriate heading elements for titles
- Screen Reader Support: Proper text hierarchy and descriptions
- Focus Management: Logical tab order for action buttons
- High Contrast: Maintains proper contrast ratios
- Descriptive Content: Clear explanations of empty states