SearchEmpty

An empty state for a search or filter with no matches.

VerifiedSince 0.3.4

Usage

Basic

Loading demo...

Loading demo...

Best Practices

Use it after a query or filter matches nothing; use TxNoData for an unfiltered empty dataset.
Echo the failed query or active filters nearby so users know what was searched.
Offer a reset or broaden-scope action when the filter state is recoverable.
Keep it inside the results container, not in a global toast or a detached banner.
Use surface="card" when it replaces a whole result panel; keep plain for inline filter feedback.

API Reference

Takes every TxEmptyState prop, event, and slot except variant, which is fixed to search-empty.

Props

Prop	Type	Default	Description
`title`	`string`	`No results`	Overrides the preset title.
`description`	`string`	`Try a different keyword or filter.`	Overrides the recovery advice.
`icon`	`TxIconSource \| string \| null`	-	Replaces the search illustration; `null` hides the icon area.
`iconSize`	`number`	-	Icon size in px.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Direction of the icon and content.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Aligns the icon, copy, and actions.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Spacing, text scale, and illustration size.
`surface`	`'plain' \| 'card'`	`'plain'`	`card` adds a bordered container for result panels.
`primaryAction`	`EmptyStateAction`	-	Generated primary recovery action; emits `primary`.
`secondaryAction`	`EmptyStateAction`	-	Generated secondary recovery action; emits `secondary`.
`actionSize`	`TxButtonProps['size']`	`'sm'`	Default size of the generated buttons.
`loading`	`boolean`	`false`	Shows a spinner when no custom icon is given.

Events

Event	Description
`primary`	Fires when the generated primary button is clicked.
`secondary`	Fires when the generated secondary button is clicked.

Slots

Name	Description
`icon`	Replaces the search illustration.
`title`	Replaces the title.
`description`	Replaces the description.
`actions`	Replaces the generated primary and secondary buttons.

Technologies

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

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