Empty

A compact empty-state card for panels and filtered results.

VerifiedSince 0.3.4

Usage

Basic

compact switches to the small size; iconClass replaces the icon.

Loading demo...

Action

Loading demo...

Best Practices

Use TxEmpty for list, search, or panel placeholders that want a card surface.
When the empty cause has product meaning, use TxNoData, TxNoSelection, TxOfflineState, or TxPermissionState.
Set compact in dense regions such as sidebars and table interiors.
Put click handling on the control in the action slot; TxEmpty emits no events.

API Reference

Renders TxEmptyState with variant="empty", surface="card", and layout="vertical" fixed.

Props

Prop	Type	Default	Description
`title`	`string`	`'Nothing here'`	Main message.
`description`	`string`	`''`	Supporting text below the title.
`iconClass`	`string`	`'i-carbon-incomplete'`	Icon class, passed to `TxEmptyState` as `icon`.
`compact`	`boolean`	`false`	`true` sets `size="small"`; otherwise `medium`.

Slots

Slot	Props	Description
`icon`	-	Replaces the `iconClass` icon.
`title`	-	Replaces the title.
`description`	-	Replaces the description.
`action`	-	Action area; replaces the `actions` slot of `TxEmptyState`.

Technologies

Source: packages/tuffex/packages/components/src/empty/.

packages/tuffex/packages/components/src/empty/index.ts