ErrorState | Tuff Docs

Usage

Uses the default title, description, and built-in error illustration (an app window with a danger badge on its bottom-right corner), with action buttons.

ErrorState (basic)

Loading demo...

Override default title and description via props, with surface="card" for card style.

ErrorState (custom)

Loading demo...

Best Practices

Name the failed object in title, for example “Rules failed to load”, instead of a generic “Something went wrong”.
Always provide a recovery path: retry, go back, open logs, or contact support.
Use surface="card" when the error replaces a data panel; use the default plain surface inside an already framed container.
Keep technical details in logs or expandable diagnostics. The default description should tell users what they can do next.
Use the actions slot only when generated primaryAction / secondaryAction buttons cannot express the recovery flow.

API Reference

TxErrorState inherits all props from TxEmptyState except variant, which is always forced to error. See EmptyState for the full base component contract.

Props

Prop	Type	Default	Description
`title`	`string`	`'Something went wrong'`	Error title. Override it with the failed object or operation.
`description`	`string`	`'Please try again later.'`	Supporting recovery guidance.
`icon`	`TxIconSource \| string \| null`	variant default	Custom icon source that replaces the built-in error illustration; set to `null` to hide the icon area entirely.
`iconSize`	`number`	derived from `size`	Icon size forwarded to `TxEmptyState`; when unset it resolves from `size` to 28 / 36 / 44 (small / medium / large).
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Content alignment.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Size tier.
`surface`	`'plain' \| 'card'`	`'plain'`	Surface style.
`primaryAction`	`EmptyStateAction`	-	Primary recovery action config.
`secondaryAction`	`EmptyStateAction`	-	Secondary action config.
`actionSize`	`TxButtonProps['size']`	`'small'`	Size of the generated action buttons; inherits `TxEmptyState`'s `small` default.
`loading`	`boolean`	`false`	When `true` and no `icon` prop or slot is provided, replaces the error illustration with a `TxSpinner`. It does not affect the action buttons.

Events

Event	Params	Description
`primary`	-	Forwarded from `TxEmptyState` when the primary generated action is clicked.
`secondary`	-	Forwarded from `TxEmptyState` when the secondary generated action is clicked.

Dashboard Recovery States

Error states should share the same data container with loading and empty states, and always provide a clear recovery action instead of only showing red error text.

Loading demo...

Slots

Slot	Props	Description
`icon`	-	Replaces the built-in error illustration.
`title`	-	Replaces the title prop rendering.
`description`	-	Replaces the description prop rendering.
`actions`	-	Replaces generated primary/secondary action buttons.

Overview

TxErrorState always forwards variant="error" to TxEmptyState.
When icon is unset (or an empty string), there is no icon slot, and loading is not true, TxEmptyState renders its built-in error illustration: an app window with a danger badge on its bottom-right corner, with two rings rippling out of the badge in turn. Under prefers-reduced-motion: reduce the rings stop and stay hidden, and the still frame is the window and badge. See EmptyState for the drawing.
The wrapper does not rewrite title, description, surface, action config, or slots; explicit props and slots are forwarded as-is.
The component does not own retry logic. It emits inherited action events or renders custom action slots for the host to handle.

Technologies

Source: packages/tuffex/packages/components/src/error-state/src/TxErrorState.vue confirms the component only binds props to TxEmptyState and forces variant="error".
Type contracts: packages/tuffex/packages/components/src/error-state/src/types.ts defines ErrorStateProps = Omit<EmptyStateProps, 'variant'>.
Base props/events: packages/tuffex/packages/components/src/empty-state/src/types.ts defines inherited props, action shape, and primary / secondary events.
Illustration: TxEmptyState draws the error illustration and TxErrorState takes no part in it (redrawn 2026-09-23). The badge uses the -light-9 tint with danger ink, because white ink on a solid danger fill is not a supported pairing in this library; the rings stop and stay hidden under reduced motion.
Verified coverage: Coverage: packages/tuffex/packages/components/src/error-state/__tests__/error-state.test.ts covers forced error variant, prop forwarding, named slot forwarding, and install registration.

查看源码

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