Stack

Lays out its children in a column, or a row with direction="row", with a gap between them: a number is in pixels, a string any CSS length. align positions the items across the stack (they stretch by default), justify along it, and wrap lets a row continue on the next line.

About usDraft

Title

Path

Stack.tsx

import {Badge, Button, Stack, TextField} from 'alinea/components'

export function StackExample() {
  return (
    <Stack gap={16} style={{width: 320}}>
      <Stack direction="row" align="center" justify="between">
        <strong>About us</strong>
        <Badge status="draft">Draft</Badge>
      </Stack>
      <TextField label="Title" defaultValue="About us" />
      <TextField label="Path" defaultValue="about" />
      <Stack direction="row" gap={8} justify="end" wrap>
        <Button variant="outline">Cancel</Button>
        <Button color="primary">Save</Button>
      </Stack>
    </Stack>
  )
}

With asChild the stack lays out its single child element instead of rendering a div. Stack replaces the deprecated HStack and VStack of alinea/ui: <Stack direction="row"> is an HStack.

Props

Lays out its children in a row or column with a gap between them

PropTypeDefaultDescription

direction'row' | 'column'Default 'column'Defaults to column

gapnumber | stringDefault –Space between the items, a number is in pixels

align'start' | 'center' | 'end' | 'stretch' | 'baseline'Default –Cross axis alignment of the items, they stretch by default

justify'start' | 'center' | 'end' | 'between'Default –Main axis distribution of the items

wrapbooleanDefault –Wrap items onto multiple lines

asChildbooleanDefault –Lay out the single child element instead of rendering a div

refRef<HTMLDivElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.