Empty StateCopy Anchor Link

Empty States communicate the absence of data, unconfigured resources, or zero-search results with clarity and reassurance. Rather than leaving the user with a blank viewport, Hashti’s EmptyState component combines iconography, an architectural heading hierarchy, reassuring descriptive copy, and prominent call-to-action (CTA) buttons to guide users toward productive next steps.

Architectural PurposeCopy Anchor Link

In classical Persian courtyards, an empty basin (howz) or open alcove is designed as an inviting, contemplative space awaiting water and life. Similarly, the Hashti EmptyState approaches empty data tables and new project views as welcoming beginnings rather than errors:

┌──────────────────────────────────────────────┐
│                  [ Icon ]                    │
│                                              │
│               Empty State Title              │
│       Helpful explanation and guidance       │
│                                              │
│             [ Primary Action Button ]        │
└──────────────────────────────────────────────┘

• Clear Information Hierarchy: Centered vertical stack comprising icon, title, description, and actionable buttons.
• Support for Both First-Run & Zero-Results: Adaptable to onboarding wizards, empty table lists, no-network states, and search queries returning zero matches.
• Integrated Action Slots: Accommodates single primary buttons or multi-action groups (e.g. “Create Cluster” and “Read Documentation”).

ImportCopy Anchor Link

import { EmptyState } from "@hashti/react";
import type { EmptyStateProps } from "@hashti/react";

Usage ExamplesCopy Anchor Link

First-Run / Onboarding Empty StateCopy Anchor Link

When a user opens a newly created workspace with no resources provisioned:

import { EmptyState, Button, Icon } from "@hashti/react";

export function FirstRunEmptyStateDemo() {
  return (
    <div className="p-8 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl">
      <EmptyState
        icon={<Icon name="database" size={40} className="text-neutral-400" />}
        title="No databases configured yet"
        description="Provision a high-availability PostgreSQL or ClickHouse cluster to start ingesting telemetry data."
        action={
          <Button variant="primary">
            <Icon name="plus" />
            Create Your First Database
          </Button>
        }
      />
    </div>
  );
}

Zero-Search Results StateCopy Anchor Link

When filtering or searching yielding no results, provide an action to clear the search filter:

import { EmptyState, Button, Icon } from "@hashti/react";

export function SearchEmptyStateDemo() {
  return (
    <EmptyState
      icon={<Icon name="search" size={32} className="text-neutral-400" />}
      title="No matching records found"
      description="We couldn't find any certificates matching query 'auth.example.internal'. Verify the domain spelling or clear active filters."
      action={
        <Button variant="secondary" size="sm">
          Clear Active Filters
        </Button>
      }
    />
  );
}

Multiple ActionsCopy Anchor Link

Provide both a primary action and a secondary learning or documentation link using the actions prop:

import { EmptyState, Button, Icon } from "@hashti/react";

export function MultiActionEmptyStateDemo() {
  return (
    <EmptyState
      icon={<Icon name="terminal" size={36} className="text-neutral-400" />}
      title="CLI Session Disconnected"
      description="The SSH connection to node 'ir-thr-01' timed out after 15 minutes of inactivity."
      actions={
        <div className="flex gap-3 justify-center">
          <Button variant="secondary">View Connection Logs</Button>
          <Button variant="primary">Reconnect to Node</Button>
        </div>
      }
    />
  );
}

Props ReferenceCopy Anchor Link

Accessibility & Content Best PracticesCopy Anchor Link

Screen Reader GuidanceCopy Anchor Link

• Heading Structure: The component wraps text titles in an <h3> by default. If your page outline requires an <h2> or <h4>, pass a custom heading element directly to title (e.g., title={<h2>No projects found</h2>}).
• Action Discovery: Ensure the primary call-to-action button has descriptive text. Use specific phrases like “Create Database” instead of generic words like “Submit”.
• Live Regions for Search: If the empty state appears dynamically following an asynchronous search query, consider wrapping the container in an aria-live="polite" region so screen reader users are notified that results have updated to zero.

WAI-ARIA & Data AttributesCopy Anchor Link