NoSelection

Usage

Loading demo...

Use it when the current pane is valid but depends on a user selection; use TxNoData when the dataset itself is empty.
Pair it with visible list/table selection affordances so the next step is discoverable.
Use surface="card" inside split panes where the empty region needs boundaries.
Keep action labels specific, such as “Create item” or “Open list”, not “OK”.

TxNoSelection accepts every EmptyStateProps field except variant.

Prop	Type	Default	Description
`title`	`string`	preset title	Overrides the no-selection title.
`description`	`string`	preset description	Supporting text for what to select next.
`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.

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-selection" to TxEmptyState.
Does not override 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: TxNoSelection always supplies variant="no-selection" to TxEmptyState and forwards all non-variant props and named slots.
State choice: Use it for empty detail panes or inspectors waiting on a user selection; do not use it for empty datasets or filtered searches.
Verified coverage: no-selection.test.ts covers variant locking, action prop forwarding, named slot forwarding, and install registration.
Component source: packages/tuffex/packages/components/src/no-selection/src/TxNoSelection.vue.
Base source: packages/tuffex/packages/components/src/empty-state/src/TxEmptyState.vue.
Types: packages/tuffex/packages/components/src/no-selection/src/types.ts exports NoSelectionProps = Omit<EmptyStateProps, 'variant'>.
Coverage: packages/tuffex/packages/components/src/no-selection/__tests__/no-selection.test.ts verifies wrapper forwarding and install behavior.

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