# Inline

> Lays children out horizontally and wraps them, for tags, actions and metadata.

Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/inline

Inline is a horizontal Stack that wraps by default and centres its items. Use it for groups that should reflow onto new lines on small screens: filters, tag lists, toolbars of buttons and metadata rows.

## Import

```tsx
import { Inline } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Wrapping group

```tsx
import type { ReactNode } from 'react';
import { Inline } from '@bindshq/stance-react';

const Pill = ({ children }: { children: ReactNode }) => (
  <span
    style={{
      padding: '4px 10px',
      border: '1px solid var(--st-color-border-default)',
      borderRadius: 999,
      fontSize: 13,
    }}
  >
    {children}
  </span>
);

export function Basic() {
  return (
    <Inline gap={2}>
      {['Legal', 'Finance', 'Sales', 'Customer success', 'Engineering', 'People operations'].map(
        (d) => (
          <Pill key={d}>{d}</Pill>
        ),
      )}
    </Inline>
  );
}
```

### Action group

```tsx
import { Button, Inline } from '@bindshq/stance-react';

export function Actions() {
  return (
    <Inline gap={2}>
      <Button variant="ghost">Cancel</Button>
      <Button variant="outline">Save draft</Button>
      <Button>Send for signature</Button>
    </Inline>
  );
}
```

### Metadata row

```tsx
import { Inline, Kbd, Text } from '@bindshq/stance-react';

export function Metadata() {
  return (
    <Inline gap={3}>
      <Text size="sm" tone="muted">
        Updated 4 Nov 2026
      </Text>
      <Text size="sm" tone="subtle" aria-hidden="true">
        ·
      </Text>
      <Text size="sm" tone="muted">
        Owner: Priya Raman
      </Text>
      <Text size="sm" tone="subtle" aria-hidden="true">
        ·
      </Text>
      <Text size="sm" tone="muted">
        Press <Kbd keys={['mod', 'k']} size="sm" /> to search
      </Text>
    </Inline>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Inline | `as` | `keyof JSX.IntrinsicElements` | `'div'` | Element to render. |
| Inline | `gap` | `SpaceKey` | `2` | Gap between children. |
| Inline | `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'center'` | Cross-axis alignment. |
| Inline | `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | None | Main-axis distribution. |
| Inline | `wrap` | `boolean` | `true` | Wrap onto new lines. |

## Accessibility

- Visual wrapping does not change reading order.
- Use `as="ul"` for lists of tags so their count is announced.

## Guidelines

**Do**

- Use for content that may wrap on small screens.

**Don’t**

- Use for vertical rhythm; use Stack.

## Related

- https://stanceui.com/components/stack
- https://stanceui.com/components/tag
- https://stanceui.com/components/toolbar