The EmptyState
component is a flexible and reusable UI element designed to display when there's no content to show. It's perfect for scenarios like empty lists, search results with no matches, or initial states of features.
Components
EmptyState
: The main wrapper componentEmptyStateHeading
: For the main headingEmptyStateText
: For descriptive textEmptyStateButton
: For a call-to-action button
Usage
import { EmptyState, EmptyStateHeading, EmptyStateText, EmptyStateButton } from '@kit/ui/empty-state';
function MyComponent() {
return (
<EmptyState>
<EmptyStateHeading>No results found</EmptyStateHeading>
<EmptyStateText>Try adjusting your search or filter to find what you're looking for.</EmptyStateText>
<EmptyStateButton>Clear filters</EmptyStateButton>
</EmptyState>
);
}
Component Details
EmptyState
The main container that wraps all other components.
- Props: Accepts all standard
div
props - Styling:
- Flex container with centered content
- Rounded corners with a dashed border
- Light shadow for depth
EmptyStateHeading
Used for the main heading of the empty state.
- Props: Accepts all standard
h3
props - Styling:
- Large text (2xl)
- Bold font
- Tight letter spacing
EmptyStateText
For descriptive text explaining the empty state or providing guidance.
- Props: Accepts all standard
p
props - Styling:
- Small text
- Muted color for less emphasis
EmptyStateButton
A button component for primary actions.
- Props: Accepts all props from the base
Button
component - Styling:
- Margin top for spacing
- Inherits styles from the base
Button
component
Features
- Flexible Structure: Components can be used in any order, and additional custom elements can be added.
- Automatic Layout: The component automatically arranges its children in a centered, vertical layout.
- Customizable: Each subcomponent accepts className props for custom styling.
- Type-Safe: Utilizes TypeScript for prop type checking.
Customization
You can customize the appearance of each component by passing a className
prop:
<EmptyState className="bg-gray-100">
<EmptyStateHeading className="text-primary">Custom Heading</EmptyStateHeading>
<EmptyStateText className="text-lg">Larger descriptive text</EmptyStateText>
<EmptyStateButton className="bg-secondary">Custom Button</EmptyStateButton>
</EmptyState>
This EmptyState
component provides a clean, consistent way to handle empty states in your application. Its modular design allows for easy customization while maintaining a cohesive look and feel across different use cases.