← Back to Components

Empty State

Component for notifying users when a section or list is empty

Basic EmptyState

Simple Empty State

Start a feedback request to see results here

Basic empty state with icon and title

Empty State with Description

Welcome to Gene Feedback

Get started by selecting a team member from the sidebar to begin the feedback process.

Empty state with both title and descriptive text

Empty State with Action Button

No feedback requests yet

Start your first feedback request to see the magic happen.

Empty state with call-to-action button when linkHref and linkText are provided

GeneIcon Integration

Using iconName prop

No tasks at this time

Check back later

Uses GeneIcon with preserveColors for original SVG styling

Different GeneIcons

Task Complete

All feedback collected successfully

Team Setup

Configure your team members

Dashboard

Your feedback overview

Multiple GeneIcon options available with consistent sizing

Empty State Variations

With Action Button

No team members found

You haven't added any team members to this list yet.

No feedback requests

There are currently no feedback requests in this section.

Empty states with action buttons when users can add content to empty sections

Without Action Button

No data available

This content will appear once data becomes available.

Empty state without action when users cannot directly add content

Real-World Use Cases

Empty State (No Data)

No feedback history yet

Feedback requests will appear here once you start the process

Empty state for when users haven't created any content yet

No Search Results

No results found

Try adjusting your search terms or filters to find what you're looking for.

Empty state when search or filter operations return no results