Components / Empty State
Empty State
Empty/no-results/error state with contextual icon, title, description, and actions slot. Six variants — including `ai` for AI-flavored empty contexts (renders an accent bubble around the icon).
data-display v0.9.0
Playground
Examples
Search empty
<cg-empty-state variant="search" title="No results found" description="Try a different search query or adjust your filters."><cg-button slot="actions" variant="secondary" size="sm">Clear filters</cg-button></cg-empty-state>Error state
<cg-empty-state variant="error" title="Something went wrong" description="We could not load your data. Please try again."><cg-button slot="actions" variant="primary" size="sm">Retry</cg-button></cg-empty-state>AI variant
<cg-empty-state variant="ai" title="No insights yet" description="Run an analysis to generate AI-powered insights from your data."><cg-button slot="actions" variant="primary" size="sm">Start Analysis</cg-button></cg-empty-state>Import
import { CgEmptyState } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-empty-state';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "search" | "error" | "success" | "info" | "ai" | "default" | Visual variant — drives the contextual icon and color treatment |
title | string | "" | Title text |
description | string | "" | Description text |
icon | string | "" | Custom icon override |