A horizontal layout primitive inspired by SwiftUI.
HStack arranges children horizontally for toolbars, metadata rows, card headers, and compact product controls.
By default, HStack uses align="center", justify="start", and gap={8}.
Use HStack when the layout direction is explicitly horizontal.
<HStack gap={8} align="center">
<Avatar><AvatarFallback>EU</AvatarFallback></Avatar>
<Text as="span" weight="semibold">EnterUI</Text>
<Badge variant="success">Stable</Badge>
</HStack>import { Avatar, Button, HStack } from "@froggdesign/enter-ui-react";Baseline alignment is useful for mixed text sizes.
Use smaller gaps in dense controls and larger gaps in headers.
Wrap keeps toolbar-like content responsive on narrow screens.
HStack is layout-only. Use semantic children and choose as="nav" with an accessible label for navigation rows.
as: div, section, article, main, aside, nav, header, or footer.gap: 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, or 48.align: start, center, end, stretch, or baseline.justify: start, center, end, or between.wrap: enables flex wrapping.fullWidth: sets width to 100%.top, right, bottom, left: external spacing (margin).padding, paddingTop, paddingRight, paddingBottom, paddingLeft: internal spacing.className.<HStack top={12} right={16} padding="1.25rem" gap={12} align="center">
<Badge>Live</Badge>
<Text size="sm" tone="muted">
Right margin and internal padding are applied directly by props.
</Text>
</HStack>HStack uses .eui-hstack with data attributes for gap, align, justify, wrap, and full-width behavior. Use it for rows and toolbar-like layouts before adding custom flex wrappers.