Unkey
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

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.

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)

PropTypeDefaultDescription
childrenReact.ReactNode-Empty state content components
classNamestringundefinedAdditional CSS classes

Empty.Icon

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS classes for the icon

Empty.Title

PropTypeDefaultDescription
childrenReact.ReactNode-Title text content
classNamestringundefinedAdditional CSS classes

Empty.Description

PropTypeDefaultDescription
childrenReact.ReactNode-Description text content
classNamestringundefinedAdditional CSS classes

Empty.Actions

PropTypeDefaultDescription
childrenReact.ReactNode-Action buttons or links
classNamestringundefinedAdditional CSS classes

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

On this page