HStack

@coinbase/cds-web@8.64.4

A Box with flexDirection="row" set by default.

import { HStack } from '@coinbase/cds-web/layout/HStack'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• VStack,
• Box,
• Grid

HStack component uses flexbox to lay content out in a row.

On web only HStack is essentially the same component as Box, because Box by default has flexbox enabled (display: flex) and takes row as its initial flex-direction value.

You should use HStack when:

• you want to lay content out in columns that are sized to their content
• you want to add gaps between columns
• you want to lay content out in columns that fill the available space within the parent container
• you need columns of proportionate size to each other (also known as a ratio-based layout)

󰔂

Tip

If you want to lay out children in equal width columns, or with repeated rows of columns of custom sizes, you should use Grid instead.

Columns Sized to Content

Loading...

󰙡

Live Code

<HStack>
  <Box padding={3} background="bgAlternate">
    First
  </Box>
  <Box padding={3} background="bgAlternate">
    Second
  </Box>
  <Box padding={3} background="bgAlternate">
    Third
  </Box>
</HStack>

Columns with Gaps

Loading...

󰙡

Live Code

<HStack gap={1}>
  <Box padding={3} background="bgAlternate">
    First
  </Box>
  <Box padding={3} background="bgAlternate">
    Second
  </Box>
  <Box padding={3} background="bgAlternate">
    Third
  </Box>
</HStack>

Columns that Fill the Available Space

Loading...

󰙡

Live Code

<HStack gap={1}>
  <Box padding={3} flexGrow={1} background="bgAlternate">
    First
  </Box>
  <Box padding={3} flexGrow={1} background="bgAlternate">
    Second
  </Box>
  <Box padding={3} flexGrow={1} background="bgAlternate">
    Third
  </Box>
</HStack>

Columns that Have Proportionate Sizes

Loading...

󰙡

Live Code

<HStack gap={1}>
  <Box padding={3} flexGrow={1} background="bgAlternate">
    First
  </Box>
  <Box padding={3} flexGrow={2} background="bgAlternate">
    Second
  </Box>
  <Box padding={3} flexGrow={3} background="bgAlternate">
    Third
  </Box>
</HStack>

A11y

Has the same accessibility requirements as Box.

Responsive Styles

Web only You can create responsive layouts by passing a configuration object to each supported property of HStack and specify unique styles for phones, tablets, or desktops.

Please note, there are no default responsive styles for Box. This is an additive feature that you will need to configure yourself.

Supported Properties

• Padding
• Margin
• Gap
• Flex styles (justify content, align content, align items, align self, flex direction, and flex wrap)
• Display
• Visibility

Usage

Loading...

󰙡

Live Code

function ResponsiveBox() {
  return (
    <HStack
      padding={{ base: 4, tablet: 3, desktop: 2 }}
      gap={{ base: 0.5, tablet: 2, desktop: 3 }}
      justifyContent={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
      alignItems={{ base: 'flex-end', tablet: 'flex-start', desktop: 'center' }}
    >
      <HStack background="bgAlternate" padding={1}>
        <Text as="p">First</Text>
      </HStack>
      <HStack background="bgSecondary" padding={1}>
        <Text as="p">Second</Text>
      </HStack>
      <HStack background="bgOverlay" padding={1}>
        <Text as="p">Third</Text>
      </HStack>
    </HStack>
  );
}