Divider

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

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

Examples

A line

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

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.

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.

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 apply here.

API

`DividerProps`

Name	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Horizontally it separates rows, vertically it separates columns. Shown in: Configurator, Upright in a bar
`strong`	`boolean`	`false`	A stronger line - for section boundaries rather than row separation. Shown in: Configurator, Strength and label, Upright in a bar
`label`	`ReactNode`	—	A label in the middle. It makes the line a named separator. Shown in: Configurator, Strength and label
`ref`	`Ref<HTMLDivElement>`	—	Receives the component's root element. from `RefProp` Shown in: A row that holds still (Sizes), An anchored surface (Popover), Take the width of the trigger (Popover) and 2 more

Also takes every attribute of <div>.

Every page of @umriss-ui/core

Getting started

Customising

Layout

Typography

Actions

Forms

Choosing

Dates and times

Feedback

Overlays

Navigation

Data display

API index

API index