Stack

Use Stack for simple one-dimensional layouts such as form sections, button groups, and compact panel content.

Basic Usage

Stack

Demo will load when visible.

<template>
  <div style="width: 360px; padding: 16px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <TxStack :gap="10">
      <TxButton>One</TxButton>
      <TxButton variant="secondary">
        Two
      </TxButton>
      <TxButton variant="ghost">
        Three
      </TxButton>
    </TxStack>
  </div>
</template>

API

Props

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'vertical'`	Direction
`gap`	`number \| string`	`12`	Gap
`align`	`string`	`'stretch'`	align-items
`justify`	`string`	`'flex-start'`	justify-content
`wrap`	`boolean`	`false`	Allows children to wrap onto multiple lines.
`inline`	`boolean`	`false`	Uses `inline-flex` instead of block-level `flex`.