layout

Stack

Flexbox ベースのレイアウトプリミティブ。スペーシングトークンに基づくギャップで、縦・横のスタックを構成。

インポート

import { Stack } from '@stella-ds/react'

Prop	型	デフォルト	説明
direction	'vertical' \| 'horizontal'	'vertical'	Flex direction
gap	'1' \| '2' \| '3' \| '4' \| '6' \| '8' \| '12' \| '16'	'4'	Gap using spacing tokens
align	'start' \| 'center' \| 'end' \| 'stretch'	'stretch'	align-items
justify	'start' \| 'center' \| 'end' \| 'between' \| 'around'	'start'	justify-content
wrap	boolean	false	Wrap flex items
asChild	boolean	false	Radix Slot pattern

Horizontal Stack

Active

Item 1

Item 2

Item 3

<Stack direction="horizontal" gap="4" align="center">
  <Avatar alt="U" size="sm" />
  <Text weight="medium">Username</Text>
</Stack>