Display and feedback

EmptyState

Concise no-data explanation and next action.

Live example

No posts yet

Publish the first note when it is ready.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { EmptyState } from "@cofob/design-system-react";

/**
 * Complete EmptyState parameter reference.
 * @param title
 *   type: string | renderable content
 *   default: —
 *   example: "No posts yet"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Publish your first note to get started."
 * @param icon
 *   type: LucideIcon (React) | Snippet (Svelte)
 *   default: —
 *   example: Inbox / icon snippet
 * @param action
 *   type: renderable content
 *   default: —
 *   example: <Button>Create a post</Button>
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function EmptyStateExample() {
  return (
    <EmptyState title="No posts" />
  );
}

Svelte

<script lang="ts">
  import { EmptyState } from "@cofob/design-system-svelte";

  // Complete EmptyState parameter reference.
  // title
  //   type: string | renderable content
  //   default: —
  //   example: "No posts yet"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Publish your first note to get started."
  // icon
  //   type: LucideIcon (React) | Snippet (Svelte)
  //   default: —
  //   example: Inbox / icon snippet
  // action
  //   type: renderable content
  //   default: —
  //   example: <Button>Create a post</Button>
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<EmptyState title="No posts" />

HTML

<!--
  Complete EmptyState parameter reference.
  title
    type: string | renderable content
    default: —
    example: "No posts yet"
  description
    type: string | renderable content
    default: —
    example: "Publish your first note to get started."
  icon
    type: LucideIcon (React) | Snippet (Svelte)
    default: —
    example: Inbox / icon snippet
  action
    type: renderable content
    default: —
    example: <Button>Create a post</Button>
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-empty-state">No posts yet</div>

Contract

CSS selector	`.cf-empty-state`
Adapters	Native · React · Svelte
Primary props	title · description · icon · action · children · div attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`title`	`string \| renderable content`	`—`	React · Svelte · HTML	`"No posts yet"`	Primary heading or accessible title.
`description`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Publish your first note to get started."`	Supporting explanatory content.
`icon`	`LucideIcon (React) \| Snippet (Svelte)`	`—`	React · Svelte · HTML	`Inbox / icon snippet`	Overrides the default semantic icon.
`action`	`renderable content`	`—`	React · Svelte · HTML	`<Button>Create a post</Button>`	Optional next action rendered in the empty state.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.