EmptyState

<ts-empty-state> vv0.4.0

The ts-empty-state component.

Open in Storybook for interactive demos.

Preview

<ts-empty-state size="md">Content</ts-empty-state>

Properties

Property	Attribute	Type	Default	Description
description	description	string | undefined	—	The description text.
heading	heading	string | undefined	—	The heading text.
icon	icon	string | undefined	—	Lucide icon name displayed large.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The size of the empty state.

Slots

Name	Description
*(default)*	Custom content below the description.
action	CTA buttons.
icon	Custom icon or illustration.

CSS Parts

Use ::part() to style internal elements:

Part	Description
action	The action slot wrapper.
base	The empty state container.
content	The custom content wrapper.
description	The description text.
heading	The heading element.
icon	The icon wrapper.

ts-empty-state::part(action) {
  /* your custom styles */
}

Usage

HTML

<ts-empty-state size="md">Content</ts-empty-state>

React

import { TsEmptyState } from '@tessera-ui/react';

<TsEmptyState size="md">Content</TsEmptyState>