# Inline

Lays out children in a horizontal row.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Inline.tsx)

## Overview

Inline lays out children in a horizontal row with a spacing token gap.

Set `wrap` when the row can outgrow narrow viewports, so items reflow instead of overflowing.

## Examples

### Basic

```tsx
import { Inline, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inline gap="2">
      <span {...styles.chip()}>Public</span>
      <span {...styles.chip()}>Private</span>
    </Inline>
  )
}

namespace styles {
  export const chip = style({
    backgroundColor: 'grayAlpha.100',
    borderRadius: 'full',
    paddingBlock: '1',
    paddingInline: '3',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Inline/Basic.tsx)

### Justify

Set `justify` to `start`, `center`, `end`, or `between`. It defaults to `start`.

```tsx
import { Inline, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Stack gap="4">
      {(['start', 'center', 'end', 'between'] as const).map((justify) => (
        <Inline justify={justify} key={justify}>
          <span>{justify}</span>
          <Inline gap="2">
            <span {...styles.chip()}>Public</span>
            <span {...styles.chip()}>Private</span>
          </Inline>
        </Inline>
      ))}
    </Stack>
  )
}

namespace styles {
  export const chip = style({
    backgroundColor: 'grayAlpha.100',
    borderRadius: 'full',
    paddingBlock: '1',
    paddingInline: '3',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Inline/Justify.tsx)

### Wrap

Set `wrap` so items reflow onto new lines instead of overflowing. It defaults to `false`.

```tsx
import { Inline, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inline gap="2" wrap>
      {['Stablecoins', 'Payments', 'Payroll', 'Remittance', 'Treasury', 'Settlement'].map(
        (label) => (
          <span key={label} {...styles.chip()}>
            {label}
          </span>
        ),
      )}
    </Inline>
  )
}

namespace styles {
  export const chip = style({
    backgroundColor: 'grayAlpha.100',
    borderRadius: 'full',
    paddingBlock: '1',
    paddingInline: '3',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Inline/Wrap.tsx)

## Guidelines

TODO: Write guidelines for Inline.