GuideState

TxGuideState is a shortcut wrapper around TxEmptyState with variant="guide" pre-set. Use it for onboarding flows, feature introductions, and first-use experiences.

Basic Usage

Uses default title and description with action buttons.

GuideState (basic)

Demo will load when visible.

<template>
  <TxGuideState
    :primary-action="{ label: 'Get Started', type: 'primary' }"
    :secondary-action="{ label: 'Learn More' }"
  />
</template>

Custom Content

Custom title and description, with surface="card" and size="large" for a more prominent guide.

GuideState (custom)

Demo will load when visible.

<template>
  <TxGuideState
    title="Create your first workspace"
    description="Workspaces help you organize projects. Follow the steps below to begin."
    surface="card"
    size="large"
    :primary-action="{ label: 'Create Workspace', type: 'primary' }"
  />
</template>

API

TxGuideState inherits all Props (except variant), Slots, and Events from TxEmptyState. See EmptyState.

Props

Prop	Type	Default	Description
title	`string`	`'Start here'`	Title (overridable)
description	`string`	`'Follow the steps to get started.'`	Description (overridable)
layout	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction
align	`'start' \| 'center' \| 'end'`	`'center'`	Alignment
size	`'small' \| 'medium' \| 'large'`	`'medium'`	Size tier
surface	`'plain' \| 'card'`	`'plain'`	Surface style
primaryAction	`EmptyStateAction`	-	Primary action config
secondaryAction	`EmptyStateAction`	-	Secondary action config

Full Props reference: EmptyState API

Interaction Contract

TxGuideState always forwards variant="guide" to TxEmptyState.
The wrapper does not rewrite title, description, surface, size, or action config; explicit props are forwarded as-is.
icon, title, description, and actions slots are forwarded unchanged to TxEmptyState.