Stack

DraftApproved

Stack lays out its children along a single axis with a gap drawn from the spacing scale. It's the everyday layout primitive; reach for Grid when you need wrapping columns.

Usage

import { Stack } from "@sina-design-system/core";

<Stack direction="row" gap={3} align="center">
  <Badge>Draft</Badge>
  <span>Invoice #204</span>
</Stack>

Examples

Direction · row and col

WireACHSEPA

row

WireACHSEPA

col

Gap · on-system steps

ABC

gap 1

ABC

gap 3

ABC

gap 8

Align · cross-axis with mixed heights

align start

align center

align end

Wrap

WireACHSEPASWIFTCardRefundPayrollInvoiceFXEscrowTreasuryLedger

Props

Prop	Type	Default	Description
`direction`	`"row" \| "col"`	`"col"`	Layout axis.
`gap`	`GapStep`	—	Spacing between children (from the 8pt scale).
`align / justify`	`string`	—	Flex alignment along each axis.
`as`	`ElementType`	—	Render as a different element (polymorphic).

Accessibility

Purely presentational. It renders a plain div with no added semantics. When the children form a real structure, pass as to keep it (e.g. as="ul" with li children keeps a list a list).