Command Palette

Search for a command to run...

Components / Display

Empty State

வெற்று நிலை

Empty state layouts appear when lists, search results, or pages hold zero operational content. They explain what is missing and prompt users with corrective call-to-actions.

வெற்று நிலைகள் பட்டியல்கள் அல்லது தேடல் முடிவுகள் காலியாக இருக்கும்போது காட்டப்படும் விளக்கும் அமைப்பாகும்.

Variants

Component preview
Empty State variantsவெற்று நிலை வடிவங்கள்

Anatomy

Structure

Anatomy

3 parts documented for implementation and review.

Component map
1

Visual Icon Glyph

சின்னக் குறியீடு<svg>

Decorative, non-interactive icon that visually reinforces the empty context (e.g. search symbol for zero results, folder symbol for zero items).

2

Explanation Title

விளக்கத் தலைப்புrequired<h3>

Bilingual, high-contrast, bold statement indicating exactly what is missing.

3

Call-to-Action Action

செயல் பொத்தான்<button>

Primary fallback action guiding the user on how to resolve the empty state (e.g. 'புதிய விண்ணப்பம்' to create a record).

API

Props

3 props
title
Type
string
Default
-
Description
Empty state title statement.
description
Type
string
Default
-
Description
Details and recovery options.
action
Type
ReactNode
Default
-
Description
Primary CTA trigger button.

Usage guidance

  • Never leave a blank page when lists have zero items — always display an empty state.
  • Ensure the primary CTA is descriptive and points directly to the correction workflow.

Best practices

Expose explicit recovery steps in body summaries
பயனர்களுக்கு மாற்று வழிகாட்டுதல்களைக் காட்டுங்கள்

Explaining how to recover from an empty listing empowers users to act confidently.

வெற்று நிலைகளில் மாற்று வழிகளைக் காட்டுவது பயனர்களுக்கு உதவும்.

Don't show flat empty boxes without helper descriptions
விளக்கங்கள் இல்லாத வெற்றுப் பெட்டிகளைக் காட்டாதே

Leaving flat, unlabeled components creates interface doubt and user anxiety.

விளக்கங்கள் இல்லாத கூறுகள் பயனர்களுக்குக் குழப்பத்தை ஏற்படுத்தும்.