# Divider

> A rule between sections, with or without a label in the middle.

A divider separates groups of content. It renders a `role="separator"` element rather than an `<hr>`, because a label goes inside it and `<hr>` takes no children.

## Basic divider

```javascript
stack({ gap: 'none' },
  text({ tone: 'muted' }, 'Everything above.'),
  divider(),
  text({ tone: 'muted' }, 'Everything below.'),
)
```

## With a label

Children become a label centred in the rule.

```javascript
stack({ gap: 'none' },
  button({ variant: 'outline', color: 'neutral', block: true }, 'Continue with GitHub'),
  divider('or'),
  button({ block: true }, 'Continue with email'),
)
```

## Spacing

`spacing` sets the margin above and below, from the same scale everything else uses.

```javascript
stack({ gap: 'none' },
  text({ variant: 'small', tone: 'muted' }, 'Tight'),
  divider({ spacing: 'xs' }),
  text({ variant: 'small', tone: 'muted' }, 'Default'),
  divider(),
  text({ variant: 'small', tone: 'muted' }, 'Roomy'),
  divider({ spacing: 'xl' }),
  text({ variant: 'small', tone: 'muted' }, 'End'),
)
```

## Vertical

A vertical divider needs a parent that gives it a height — a flex row whose items stretch, which is what `stack()` does by default.

```javascript
stack({ direction: 'row', gap: 'none', align: 'stretch' },
  text({ variant: 'small' }, '4.1 kB'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '12 pages'),
  divider({ orientation: 'vertical' }),
  text({ variant: 'small' }, '0 islands'),
)
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Which way the rule runs. |
| `spacing` | `Space` | `'md'` | Margin on either side of the rule. |