AI Components / Empty State
Empty State
Contextual empty state with icon, title, description, and optional action button. Four semantic variants for different empty contexts (default / error / search / ai).
ai-collab v0.5.0
Playground
Examples
Default — no data yet
<ai-empty-state title="No data yet" description="Connect a data source to start analyzing." action-label="Connect Data"></ai-empty-state>AI variant
<ai-empty-state variant="ai" title="No insights yet" description="Run an analysis to generate AI-powered insights from your data." action-label="Start Analysis"></ai-empty-state>Search — no results
<ai-empty-state variant="search" title="No matches found" description="Try a different search query or adjust your filters." action-label="Clear filters"></ai-empty-state>Error state
<ai-empty-state variant="error" title="Something went wrong" description="We couldn\'t load your data. Please try again." action-label="Retry"></ai-empty-state>No action — informational only
<ai-empty-state variant="ai" title="Waiting for input" description="Start typing or upload a file to begin."></ai-empty-state>Import
import { AiEmptyState } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-empty-state';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
icon | string | "" | Icon SVG markup (slot the default if empty) |
title | string | "Nothing here yet" | Heading |
description | string | "" | Supporting body text |
action-label | string | "" | Action button text (omit to hide) |
variant | "default" | "error" | "search" | "ai" | "default" | Visual variant — drives icon-circle bg, title color, and action-button color |
Events
| Event | Detail | Description |
|---|---|---|
ai-empty-action | {} | Action button clicked |