NoData

Usage

Loading demo...

Use it when a data source is valid and returned zero records; use TxOfflineState or TxPermissionState for transport and access failures.
Keep copy data-specific: “No invoices yet” is more useful than “Nothing here”.
Offer a creation or import action only when the current user can actually populate the dataset.
Use surface="card" inside dashboards and table panels so the empty region occupies the same container as loaded data.

TxNoData accepts every EmptyStateProps field except variant.

Prop	Type	Default	Description
`title`	`string`	preset title	Overrides the no-data title.
`description`	`string`	preset description	Explains why the dataset is empty or how to populate it.
`icon`	`TxIconSource \| string \| null`	preset illustration	Custom icon source/class, or `null` to hide the icon area.
`iconSize`	`number`	size preset	Custom icon size in pixels.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Empty-state layout.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment within the wrapper.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Density and illustration scale.
`surface`	`'plain' \| 'card'`	`'plain'`	Adds card containment when needed.
`primaryAction`	`EmptyStateAction`	-	Generated primary action.
`secondaryAction`	`EmptyStateAction`	-	Generated secondary action.
`actionSize`	`TxButtonProps['size']`	`'small'`	Default generated action size.
`loading`	`boolean`	`false`	Uses spinner when no custom icon is supplied.

Field	Type	Default	Description
`label`	`string`	required	Button label.
`type`	`TxButtonProps['type']`	-	Button semantic type, for example `primary`.
`variant`	`TxButtonProps['variant']`	-	Button visual variant.
`size`	`TxButtonProps['size']`	`actionSize`	Per-button size override.
`disabled`	`boolean`	`false`	Disables the generated button.
`icon`	`string`	-	Button icon class.

Event	Params	Description
`primary`	-	Forwarded from the generated primary action.
`secondary`	-	Forwarded from the generated secondary action.

Slot	Props	Description
`icon`	-	Replaces the preset illustration or custom icon.
`title`	-	Replaces resolved title content.
`description`	-	Replaces resolved description content.
`actions`	-	Replaces generated primary/secondary action buttons.

Always forwards variant="no-data" to TxEmptyState.
Does not rewrite explicit title, description, surface, layout, align, size, icon, or action props.
Forwards icon, title, description, and actions slots unchanged to TxEmptyState.
Generated primary / secondary events come from the wrapped TxEmptyState action buttons.

Wrapper contract: TxNoData is a thin TxEmptyState wrapper that always supplies variant="no-data"; every other EmptyStateProps field is forwarded unchanged.
State choice: Use this only for valid, loaded datasets with zero records. Connectivity, access, loading, and filtered-result states have dedicated wrappers so copy and recovery actions stay precise.
Verified coverage: no-data.test.ts covers forced variant forwarding, explicit props/actions, named slots, and install registration; base rendering and action events are inherited from TxEmptyState.
Component source: packages/tuffex/packages/components/src/no-data/src/TxNoData.vue.
Base source: packages/tuffex/packages/components/src/empty-state/src/TxEmptyState.vue.
Types: packages/tuffex/packages/components/src/no-data/src/types.ts exports NoDataProps = Omit<EmptyStateProps, 'variant'>.
Coverage: packages/tuffex/packages/components/src/no-data/__tests__/no-data.test.ts verifies variant locking, prop forwarding, slot forwarding, and install behavior.

packages/tuffex/packages/components/src/no-data/index.ts