Components / Layout

HStack

HStack is <Stack direction="row"> named at the call site. Reach for it when the row direction is fixed — toolbars, avatar-and-name rows, button groups.

Loading playground…

What it is

A sugar wrapper. HStack renders <Stack direction="row" /> and accepts every other Stack prop unchanged. Use it when the call site reads more clearly with the named primitive than with an explicit direction="row".

Install

HStack is exported from usemotif. No separate install.

example.tsx

import { HStack } from 'usemotif';

API

HStack

stable

function HStack(props: Omit<StackProps, "direction">): JSX.Element

…StackPropsOmit<StackProps, "direction">

Every Stack prop except `direction`. `gap`, `alignItems`, `justifyContent`, and all Box style props apply normally.

Examples

Avatar-and-name row:

example.tsx

<HStack gap="$2" alignItems="center">
<Avatar src={user.avatar} />
<Text>{user.name}</Text>
</HStack>

A toolbar with a Spacer pushing actions to the right:

example.tsx

<HStack alignItems="center" gap="$2">
<Heading>Inbox</Heading>
<Spacer />
<Button intent="neutral">Filter</Button>
<Button intent="primary">Compose</Button>
</HStack>