OfflineState

Usage

Loading demo...

Use it for recoverable network or offline states; use TxErrorState or a product-specific error for server failures that are not connectivity related.
Tell users whether local drafts, queued actions, or cached data remain safe.
Keep the primary action retry-focused. Avoid destructive actions in an offline empty state.
Prefer surface="card" inside panels so the network state occupies the same visual container as loaded content.

TxOfflineState accepts every EmptyStateProps field except variant.

Prop	Type	Default	Description
`title`	`string`	preset title	Overrides the offline-state title.
`description`	`string`	preset description	Explains the network problem and whether user work is safe.
`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="offline" to TxEmptyState.
Does not rewrite 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: TxOfflineState locks variant="offline" on TxEmptyState; title, description, surface, actions, icons, and slots remain host-controlled.
State choice: Use it for recoverable local network/offline states. Server failures that are not caused by connectivity should use the error-state pattern instead.
Verified coverage: offline-state.test.ts covers forced variant forwarding, props/actions, named slots, and install registration.
Component source: packages/tuffex/packages/components/src/offline-state/src/TxOfflineState.vue.
Base source: packages/tuffex/packages/components/src/empty-state/src/TxEmptyState.vue.
Types: packages/tuffex/packages/components/src/offline-state/src/types.ts exports OfflineStateProps = Omit<EmptyStateProps, 'variant'>.
Coverage: packages/tuffex/packages/components/src/offline-state/__tests__/offline-state.test.ts verifies wrapper forwarding and install behavior.

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