GuideState | Tuff Docs

Usage

Use the preset title and description when the surrounding page already explains the context.

Loading demo...

When the guide stands alone in a page or panel, override the copy and set surface="card".

Loading demo...

Use it for first use, setup prompts, or "start here" panels; use TxNoData for missing data.
Make the title name the next step, not describe an empty screen.
Use surface="card" among dashboard content; keep plain inside an already framed panel.
Keep action labels specific, such as "Create workspace" or "Connect account", not "Continue".
Pass slots only when the preset illustration or generated buttons cannot express the target action.

Takes every TxEmptyState prop, event, and slot except variant, which is fixed to guide.

Prop	Type	Default	Description
`title`	`string`	`'Start here'`	Overrides the preset title.
`description`	`string`	`'Follow the steps to get started.'`	Overrides the preset description.
`icon`	`TxIconSource \| string \| null`	guide illustration	Replaces the illustration; `null` hides the icon area.
`iconSize`	`number`	size preset	Icon or spinner size in px.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Content alignment.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Visual size.
`surface`	`'plain' \| 'card'`	`'plain'`	`card` adds a card surface.
`primaryAction`	`EmptyStateAction`	-	Generated primary action; emits `primary`.
`secondaryAction`	`EmptyStateAction`	-	Generated secondary action; emits `secondary`.
`actionSize`	`TxButtonProps['size']`	`'sm'`	Default size of the generated buttons.
`loading`	`boolean`	`false`	Shows a spinner when there is no `icon` slot or prop.

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

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

packages/tuffex/packages/components/src/guide-state/index.ts