# Divider

> Package `@umriss-ui/core`, version 0.40.0. Demo page: <https://romanhaendler.github.io/umriss-ui/core/divider/>. Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/core/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/core/llms-full.txt).

A line between two groups of content, across or upright, that may name the part after it (also called a separator or rule).

```ts
import { Divider } from "@umriss-ui/core";
```

Demo page: https://romanhaendler.github.io/umriss-ui/core/divider/

## Examples

### A line

Put a `Divider` between two groups; without a label it is decoration and hidden from assistive technology.

```tsx
import { Divider, Stack, Text } from "@umriss-ui/core";

export default function ALine() {
  return (
    <Stack gap={3} style={{ maxWidth: 480 }}>
      <Text size="sm">Tour T-01 · FP 214 K · Martin Hale</Text>
      <Divider />
      <Text size="sm" tone="secondary">
        11 stops · 86 km · back at the North depot at 13:40
      </Text>
    </Stack>
  );
}
```

### Strength and label

The fine line separates rows, `strong` marks a section boundary, and a `label` makes the line a named separator.

```tsx
import { Divider, Stack, Text } from "@umriss-ui/core";

export default function StrengthAndLabel() {
  return (
    <Stack gap={3} style={{ maxWidth: 480 }}>
      <Text size="sm">Stop 1 · Holloway Garden Supplies · 07:25</Text>
      <Divider />
      <Text size="sm">Stop 2 · Oakridge Pharmacy · 07:48</Text>
      <Divider strong />
      <Divider label="Afternoon" />
      <Text size="sm">Stop 8 · Pellham Hardware · 12:05</Text>
    </Stack>
  );
}
```

### Upright in a bar

Set `orientation` to `vertical` between groups of buttons; it takes its height from a row `Stack`.

```tsx
import { Button, Divider, Stack } from "@umriss-ui/core";

export default function UprightInABar() {
  return (
    <Stack direction="row" gap={3} align="center" wrap>
      <Button size="sm" variant="ghost">
        This sprint
      </Button>
      <Button size="sm" variant="ghost">
        Next sprint
      </Button>
      <Divider orientation="vertical" />
      <Button size="sm" variant="ghost">
        By person
      </Button>
      <Button size="sm" variant="ghost">
        By project
      </Button>
      <Divider orientation="vertical" strong />
      <Button size="sm" variant="ghost">
        Export
      </Button>
    </Stack>
  );
}
```

## When to use something else

- A group that needs a surface and a heading of its own → Card

## Keyboard

The keys of [Button](https://romanhaendler.github.io/umriss-ui/core/button/#keyboard-button) apply here.

## API

### `DividerProps`

| Prop | Type | Default | Description |
|---|---|---|---|
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Horizontally it separates rows, vertically it separates columns.<br>Shown in: [Configurator](https://romanhaendler.github.io/umriss-ui/core/divider/#configurator-divider), [Upright in a bar](https://romanhaendler.github.io/umriss-ui/core/divider/#upright-in-a-bar) |
| `strong` | `boolean` | `false` | A stronger line - for section boundaries rather than row separation.<br>Shown in: [Configurator](https://romanhaendler.github.io/umriss-ui/core/divider/#configurator-divider), [Strength and label](https://romanhaendler.github.io/umriss-ui/core/divider/#strength-and-label), [Upright in a bar](https://romanhaendler.github.io/umriss-ui/core/divider/#upright-in-a-bar) |
| `label` | `ReactNode` | — | A label in the middle. It makes the line a named separator.<br>Shown in: [Configurator](https://romanhaendler.github.io/umriss-ui/core/divider/#configurator-divider), [Strength and label](https://romanhaendler.github.io/umriss-ui/core/divider/#strength-and-label) |
| `ref` | `Ref<HTMLDivElement>` | — | Receives the component's root element. From `RefProp`.<br>Shown in: [A row that holds still (Sizes)](https://romanhaendler.github.io/umriss-ui/core/sizes/#a-row-that-holds-still), [An anchored surface (Popover)](https://romanhaendler.github.io/umriss-ui/core/popover/#anchored-surface), [Take the width of the trigger (Popover)](https://romanhaendler.github.io/umriss-ui/core/popover/#width-from-anchor) and 2 more |

Also takes every attribute of `<div>`.