# Divider (/docs/divider)





`Divider` renders a thin separator line — horizontal or vertical, plain or with a centered/leading/trailing label. Pure Server Component, no client JS.

```tsx
import { Divider } from '@42-central/ui-react/divider';

<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />
```

## Playground [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Orientation [#orientation]

`orientation="vertical"` swaps the line from the block axis to the inline axis (`border-inline-start` under the hood) and relies on `align-self: stretch` to fill its parent's height — it has no self-sizing, so it needs a flex or grid parent that already provides a definite height. Without one, it collapses to zero height, the same limitation Mantine's own Divider has.

<Callout type="info" title="Vertical needs a sized parent">
  A vertical Divider stretches to fill whatever height its flex/grid parent gives it — it never sets its own height. Drop it into a `Flex`/`flex` row (or any container with a real height), not directly into block-flow content.
</Callout>

<Preview align="block" code="&#x22;<Divider />\n\n<div className=\&#x22;flex h-24 items-center gap-4\&#x22;>\n  <span>Left</span>\n  <Divider orientation=\&#x22;vertical\&#x22; />\n  <span>Right</span>\n</div>&#x22;">
  <div className="flex w-full max-w-sm flex-col gap-6">
    <Divider />

    <div className="flex h-24 items-center gap-4">
      <span>
        Left
      </span>

      <Divider orientation="vertical" />

      <span>
        Right
      </span>
    </div>
  </div>
</Preview>

## With a label [#with-a-label]

Pass `label` to center content on the line — a word, a short phrase, an icon. `labelPosition` (`"start" | "center" | "end"`, default `"center"`) follows flexbox's own logical main-axis edges rather than Mantine's `"left"/"right"`, so it flips correctly under `dir="rtl"` with no extra CSS (the same convention `Drawer`'s `placement` prop uses). The combination also works with `orientation="vertical"` — unlike Mantine's own Divider, whose CSS never adapts the label layout for that case.

<Preview align="block" code="&#x22;<Divider label=\&#x22;OR\&#x22; />\n<Divider label=\&#x22;Section\&#x22; labelPosition=\&#x22;start\&#x22; />\n<Divider label=\&#x22;End\&#x22; labelPosition=\&#x22;end\&#x22; />&#x22;">
  <div className="flex w-full max-w-sm flex-col gap-4">
    <Divider label="OR" />

    <Divider label="Section" labelPosition="start" />

    <Divider label="End" labelPosition="end" />
  </div>
</Preview>

<Preview align="block" code="&#x22;<div className=\&#x22;flex h-32 items-center gap-4\&#x22;>\n  <span>Left</span>\n  <Divider orientation=\&#x22;vertical\&#x22; label=\&#x22;OR\&#x22; />\n  <span>Right</span>\n</div>&#x22;">
  <div className="flex h-32 items-center gap-4">
    <span>
      Left
    </span>

    <Divider orientation="vertical" label="OR" />

    <span>
      Right
    </span>
  </div>
</Preview>

## Sizes [#sizes]

`size` (the kit's canonical `xs`–`xl` scale) controls line thickness, 1–5px — the same mapping Mantine uses. Defaults to `xs`, unlike most of the kit's components (which default to `md`): a hairline reads better thin by default.

<Preview align="block" code="&#x22;<Divider size=\&#x22;xs\&#x22; />\n<Divider size=\&#x22;sm\&#x22; />\n<Divider size=\&#x22;md\&#x22; />\n<Divider size=\&#x22;lg\&#x22; />\n<Divider size=\&#x22;xl\&#x22; />&#x22;">
  <div className="flex w-full max-w-sm flex-col gap-3">
    <Divider size="xs" />

    <Divider size="sm" />

    <Divider size="md" />

    <Divider size="lg" />

    <Divider size="xl" />
  </div>
</Preview>

## Variants [#variants]

`variant` sets the border style — `solid` (default), `dashed`, or `dotted`.

<Preview align="block" code="&#x22;<Divider variant=\&#x22;solid\&#x22; />\n<Divider variant=\&#x22;dashed\&#x22; />\n<Divider variant=\&#x22;dotted\&#x22; />&#x22;">
  <div className="flex w-full max-w-sm flex-col gap-3">
    <Divider variant="solid" />

    <Divider variant="dashed" />

    <Divider variant="dotted" />
  </div>
</Preview>

## Colors [#colors]

Unset, `Divider` renders a neutral hairline. Pass `color` to tint the line (and its label's flanking lines) to any palette accent.

<Preview align="block" code="&#x22;<Divider />\n<Divider color=\&#x22;brand\&#x22; />\n<Divider color=\&#x22;red\&#x22; variant=\&#x22;dashed\&#x22; />&#x22;">
  <div className="flex w-full max-w-sm flex-col gap-3">
    <Divider />

    {COLORS.map((c) => (
          <Divider key={c} color={c} />
        ))}
  </div>
</Preview>

## API [#api]

<TypeTable
  type="{
  orientation: {
    type: &#x22;'horizontal' | 'vertical'&#x22;,
    default: &#x22;'horizontal'&#x22;,
    description: 'Line axis. `vertical` needs a flex/grid parent providing a real height.',
  },
  size: {
    type: &#x22;'xs' | 'sm' | 'md' | 'lg' | 'xl'&#x22;,
    default: &#x22;'xs'&#x22;,
    description: 'Line thickness, 1–5px.',
  },
  variant: {
    type: &#x22;'solid' | 'dashed' | 'dotted'&#x22;,
    default: &#x22;'solid'&#x22;,
    description: 'Border style.',
  },
  color: {
    type: &#x22;'brand' | 'neutral' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'cyan' | 'blue' | 'purple' | 'pink' | (string & {})&#x22;,
    default: 'none',
    description: 'Accent palette for the line. Unset renders a neutral hairline.',
  },
  label: {
    type: 'ReactNode',
    description: 'Content centered on the line. Omit for a plain, unlabeled line.',
  },
  labelPosition: {
    type: &#x22;'start' | 'center' | 'end'&#x22;,
    default: &#x22;'center'&#x22;,
    description: 'Where label sits along the line. Ignored when label is unset.',
  },
}"
/>

## Accessibility [#accessibility]

`Divider` renders `role="separator"`, and sets `aria-orientation="vertical"` when `orientation="vertical"` (horizontal is ARIA's implicit default, so it's omitted there). It's non-interactive — no `tabIndex`, no focus handling.

Remember that `orientation="vertical"` has no self-sizing — place it inside a flex or grid container with a real height, or it renders with zero height and effectively disappears from the accessibility tree's visual layout too.