NoSelection

An empty state for a detail pane awaiting a selection.

VerifiedSince 0.3.4

Usage

Basic

Loading demo...

Best Practices

Use it when the pane is valid but waits on a selection; use TxNoData for an empty dataset and TxSearchEmpty for a filter with no matches.
Pair it with visible selection affordances in the list or table so users know where to pick.
Use surface="card" in split panes so the empty region has clear bounds.
Keep action labels specific, such as "Create item" or "Open list", not "OK".

API Reference

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

Props

Prop	Type	Default	Description
`title`	`string`	preset title	Overrides the preset title.
`description`	`string`	preset description	What to select next.
`icon`	`TxIconSource \| string \| null`	preset illustration	Replaces the illustration; `null` hides the icon area.
`iconSize`	`number`	size preset	Icon size in px.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Content alignment.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Spacing and illustration size.
`surface`	`'plain' \| 'card'`	`'plain'`	`card` adds a card border.
`primaryAction`	`EmptyStateAction`	-	Generated primary action.
`secondaryAction`	`EmptyStateAction`	-	Generated secondary action.
`actionSize`	`TxButtonProps['size']`	`'sm'`	Default size of the generated buttons.
`loading`	`boolean`	`false`	Shows a spinner when no custom icon is given.

Events

Event	Params	Description
`primary`	-	Fires when the generated primary action is clicked.
`secondary`	-	Fires when the generated secondary action is clicked.

Slots

Slot	Props	Description
`icon`	-	Replaces the illustration or icon.
`title`	-	Replaces the title.
`description`	-	Replaces the description.
`actions`	-	Replaces the generated primary and secondary buttons.

Technologies

Source: packages/tuffex/packages/components/src/no-selection/.

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