BlankSlate

A large empty state that guides first-time users to a first action.

VerifiedSince 0.3.4

Usage

Basic

Loading demo...

Best Practices

Use it for first use and onboarding; use TxNoData for recurring empty query results.
Explain the value of the first step, not just the absence of content.
Offer one direct primary action; secondary actions teach, import, or skip.
Keep full-page blank slates on surface="plain" unless the layout already uses cards.

API Reference

Takes every TxEmptyState prop, event, and slot except variant, which is fixed to blank-slate; size defaults to 'large'.

Props

Prop	Type	Default	Description
`title`	`string`	preset title	Onboarding headline.
`description`	`string`	preset description	Why the first step matters.
`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'`	`'large'`	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/blank-slate/.

packages/tuffex/packages/components/src/blank-slate/index.ts