HStack

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}.

#Default usage

<HStack gap={8} align="center">
  <Avatar><AvatarFallback>EU</AvatarFallback></Avatar>
  <Text as="span" weight="semibold">EnterUI</Text>
  <Badge variant="success">Stable</Badge>
</HStack>

#Import

import { Avatar, Button, HStack } from "@froggdesign/enter-ui-react";

#Alignment

#Density

#Patterns

#Accessibility

HStack is layout-only. Use semantic children and choose as="nav" with an accessible label for navigation rows.

#API

• 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.
• Extends native props for the rendered element and supports className.

#Spacing

<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>

#Styling

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.