Empty

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

import { Button, Empty } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <Empty>
      <Empty.Icon />
      <Empty.Title>No Data Found</Empty.Title>
      <Empty.Description>There are no items to display.</Empty.Description>
      <Empty.Actions>
        <Button>Create New Item</Button>
      </Empty.Actions>
    </Empty>
  );
}

Examples

Basic Empty State

A complete empty state with icon, title, description, and action button.

1
2
3
4
5
6
7
8
9
10
11

<Empty>
    <Empty.Icon />
    <Empty.Title>Example Title Text</Empty.Title>
    <Empty.Description>Example of Description Text.</Empty.Description>
    <Empty.Actions>
    <Button>
        <BookBookmark /> 
        Submit
    </Button>
    </Empty.Actions>
</Empty>

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)

Empty.Icon

Empty.Title

Empty.Description

Empty.Actions

Structure

The Empty component is composed of several subcomponents that work together:

1. Empty - The main container component
2. Empty.Icon - Default UFO icon with styling
3. Empty.Title - Main heading text for emphasis
4. Empty.Description - Explanatory text about the empty state
5. 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:

<Empty className="custom-empty-container">
  <Empty.Icon className="custom-icon" />
  <Empty.Title className="custom-title">Custom Title</Empty.Title>
  <Empty.Description className="custom-description">
    Custom description text
  </Empty.Description>
  <Empty.Actions className="custom-actions">
    <Button>Custom Action</Button>
  </Empty.Actions>
</Empty>

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