Divider

A rule between two things. It is not a surface: no acrylic, no light, no shadow — just the hairline.

import { Divider } from 'neba';

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

Props

Prop	Type	Default	Description
orientationshared	'horizontal' | 'vertical'	'horizontal'	Which way the line runs. A vertical rule has no height of its own — it stretches to its flex parent
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The same hairline a Card scores its sections with
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Type scale of the label. The line itself has no size
children	ReactNode	—	A label set into the line. A string is copied into aria-label as well
textAlign	'start' | 'center' | 'end'	'center'	Where the label sits. Off-centre leaves a short stub on the near side

There is no variant and no elevation. The line is drawn as a single border edge, so a divider never adds a pixel of layout beyond the rule itself — and it is literally the same declaration Card uses between its sections, which is why a table on a card and the card's own dividers are one family of lines.

Examples

Labels

center splits the line in half. start and end leave a short stub on the near side, so the label still reads as set into the rule rather than floating above it.

import { Divider } from 'neba';

export default function DividerLabels() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Divider textAlign="start">Recent</Divider>
      <Divider>Older</Divider>
      <Divider textAlign="end">Archived</Divider>
    </div>
  );
}

Vertical

A vertical divider has no height of its own — it stretches to its flex parent, the way a rule between two toolbar groups should. A vertical label turns with the line, or the rule would grow to the width of the word and stop being a hairline.

import { Divider } from 'neba';

export default function DividerVertical() {
  return (
    <div className="flex h-32 items-stretch gap-6">
      <div className="flex w-28 items-center justify-center text-[0.8125rem]">Before</div>
      <Divider orientation="vertical" />
      <div className="flex w-28 items-center justify-center text-[0.8125rem]">Between</div>
      <Divider orientation="vertical">AND</Divider>
      <div className="flex w-28 items-center justify-center text-[0.8125rem]">After</div>
    </div>
  );
}

Colour

Only the hairline is coloured, and only faintly.

import { Divider } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function DividerColors() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      {COLORS.map((color) => (
        <Divider key={color} color={color}>
          {color}
        </Divider>
      ))}
    </div>
  );
}

Accessibility

separator is not a name-from-content role, so a visible label does not become the accessible name on its own — a screen reader would announce a bare "separator" and read the word loose. A string label is therefore copied into aria-label. Anything richer is left alone: only you know which part of it is the name.