# Component/Stack/HStack

> Props: component-stack-hstack.props.txt

## Examples


### Base

```tsx
{
  render: args => <HStack {...args}>
      <Box background={colors.red150} />
      <Box background={colors.red200} />
      <Box background={colors.red400} />
      <Box background={colors.red500} />
    </HStack>
}
```

### Spacing

```tsx
{
  render: args => <HStack {...args}>
      <Box background={colors.red150} />
      <Box background={colors.red200} />
      <Box background={colors.red400} />
      <Box background={colors.red500} />
    </HStack>,
  args: {
    spacing: 12
  }
}
```

### Spacing Auto

```tsx
{
  render: args => <HStack {...args}>
      <Box background={colors.red150} />
      <Box background={colors.red200} />
      <Box background={colors.red400} />
      <Box background={colors.red500} />
    </HStack>,
  args: {
    spacing: 'auto'
  }
}
```