Divider

A thin rule that separates content. It can carry a label to name the section it opens.

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
length	number | string	—	How far the rule runs: the width of a horizontal divider, the height of a vertical one. A number is pixels, a string is any CSS length. Left out, a horizontal rule is the full width of its container and a vertical one stretches to its flex row
thickness	number | string	1	How thick the rule is. A number is pixels, a string is any CSS length
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 rule is drawn as a single border edge, so it takes no layout beyond its own thickness.

Examples

length and thickness

length is how far the rule runs (the width of a horizontal divider, the height of a vertical one), and thickness is how heavy it is. Both take a number of pixels or any CSS length. Left out, a horizontal rule fills its container and a vertical one stretches to the flex row it is in.

import { Divider, Typography } from 'neba';

/**
 * `length` is the long axis and `thickness` is the short one, whichever way the
 * rule runs. Both take a number of pixels or any CSS length.
 */
export default function DividerSize() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-4">
      <Typography level="caption">Full width, 1px — the default</Typography>
      <Divider />

      <Typography level="caption">length=&quot;50%&quot;</Typography>
      <Divider length="50%" />

      <Typography level="caption">length=&#123;120&#125; thickness=&#123;2&#125;</Typography>
      <Divider length={120} thickness={2} color="success" />

      <Typography level="caption">thickness=&quot;0.25rem&quot;</Typography>
      <Divider thickness="0.25rem" color="danger" />

      <Typography level="caption">Vertical, length=&#123;48&#125;</Typography>
      <div className="flex items-center gap-4">
        <Typography level="caption">before</Typography>
        <Divider orientation="vertical" length={48} thickness={2} color="info" />
        <Typography level="caption">after</Typography>
      </div>
    </div>
  );
}

textAlign

A label in children splits the rule around it. center halves the line; start and end leave a short stub on the near side, so the label 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>
  );
}

orientation

vertical has no height of its own and stretches to its flex parent: the shape to use between control groups in a toolbar. A vertical label turns with the rule.

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>
  );
}

color

color applies to the rule only, and 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

• Renders with role="separator".
• separator does not take its accessible name from content, so a string label is also passed through as aria-label. A node is left alone, since only the caller knows which part of it is the name: set aria-label yourself if you need one.