EmptyState

TxEmptyState renders a compact feedback panel for pages, tables, detail panes, and onboarding steps that do not have content to show yet. Use a preset variant for common states, then override the text, icon, or actions only when the local context needs more specific copy.

Basic Usage

EmptyState (variant)

Demo will load when visible.

<template>
  <TxEmptyState
    variant="no-data"
    :primary-action="{ label: 'Create', type: 'primary' }"
    :secondary-action="{ label: 'Refresh' }"
  />
</template>

Horizontal Layout

EmptyState (horizontal)

Demo will load when visible.

<template>
  <TxEmptyState
    variant="no-selection"
    layout="horizontal"
    surface="card"
    title="No selection"
    description="Pick an item from the left to continue."
  />
</template>

Custom Slots

EmptyState (slots)

Demo will load when visible.

<template>
  <TxEmptyState variant="custom">
    <template #icon>
      <TxIcon name="i-carbon-search" :size="28" />
    </template>
    <template #title>
      Setup required
    </template>
    <template #description>
      Connect a workspace to enable this feature.
    </template>
    <template #actions>
      <TxButton type="primary">Connect</TxButton>
      <TxButton>Learn more</TxButton>
    </template>
  </TxEmptyState>
</template>

Preset Components

TxBlankSlate: large blank state (default size="large")
TxLoadingState: loading placeholder (default variant="loading")
TxNoSelection: no-selection placeholder (default variant="no-selection")
TxNoData: no-data placeholder (default variant="no-data")
TxSearchEmpty: empty search state (default variant="search-empty")
TxOfflineState: offline hint (default variant="offline")
TxPermissionState: permission denied (default variant="permission")
TxErrorState: error state (default variant="error"), see ErrorState
TxGuideState: guide state (default variant="guide"), see GuideState

API

Props

Prop	Type	Default	Description
`variant`	`EmptyStateVariant`	`'empty'`	Selects the preset title, description, and illustration for common states.
`title`	`string`	-	Overrides the preset title.
`description`	`string`	-	Overrides the preset supporting text.
`icon`	`TxIconSource \| string \| null`	-	Replaces the preset illustration with a Tuff icon source, icon class/name, or `null` to hide the icon area.
`iconSize`	`number`	-	Sets the custom icon or spinner size in pixels; presets use the size scale when omitted.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Controls whether icon and content stack vertically or sit side by side.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Aligns the icon, copy, and actions within the empty-state panel.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Adjusts spacing, text scale, and preset illustration size.
`surface`	`'plain' \| 'card'`	`'plain'`	Adds a bordered card surface when the empty state needs visual containment.
`primaryAction`	`EmptyStateAction`	-	Renders the primary action button and emits `primary` when clicked.
`secondaryAction`	`EmptyStateAction`	-	Renders the secondary action button before the primary action and emits `secondary` when clicked.
`actionSize`	`TxButtonProps['size']`	`'small'`	Default button size used by actions that do not set their own size.
`loading`	`boolean`	`false`	Shows a spinner when no custom icon slot or icon prop is provided.

EmptyStateAction

Prop	Type	Default	Description
`label`	`string`	-	Button text.
`type`	`TxButtonProps['type']`	-	Button tone shortcut forwarded to `TxButton`.
`variant`	`TxButtonProps['variant']`	-	Explicit `TxButton` visual variant.
`size`	`TxButtonProps['size']`	-	Per-action size override.
`disabled`	`boolean`	`false`	Disables the action button and suppresses its event.
`icon`	`string`	-	Optional icon class rendered inside the action button.

Slots

Name	Description
`icon`	Replaces the preset illustration, spinner, or icon prop.
`title`	Replaces the resolved title content.
`description`	Replaces the resolved description content.
`actions`	Replaces generated primary and secondary action buttons.

Events

Event	Description
`primary`	Emitted when the generated primary action button is clicked.
`secondary`	Emitted when the generated secondary action button is clicked.