Stack

Stack lays its children out in a row or a column, with a gap between them. It is how the other examples on these pages space their buttons:

tightrowcentred

normalcolumnstart

StackDemo.tsx

import { Text } from '@hozo/core'
import { Stack } from '@hozo/ui'

function Box({ label }: { label: string }) {
  return (
    <Text className="rounded-hozo-control bg-hozo-surface-raised px-3 py-2 text-sm text-hozo-text">
      {label}
    </Text>
  )
}

export function StackDemo() {
  return (
    <Stack gap="loose">
      <Stack direction="row" gap="tight" align="center">
        <Box label="tight" />
        <Box label="row" />
        <Box label="centred" />
      </Stack>
      <Stack gap="normal" align="start">
        <Box label="normal" />
        <Box label="column" />
        <Box label="start" />
      </Stack>
    </Stack>
  )
}

• direction is column by default, or row.
• gap is one of four: none, tight (8px), normal (16px, the default) and loose (24px). A short list keeps spacing consistent across a screen. For any other gap, use a View with a gap-* class.
• align places the children across the direction: start, center, end or stretch.
• className is added after the stack’s own classes.