Divider

A visual line that says "things on one side, different things on the other". Two modes: a plain line, or a labeled separator with the line on both sides of the label (<Divider>OR</Divider> — the universal sign-in pattern).

import { Divider, Typography } from '@dashforge/tw';

{/* Plain line */}
<Divider />

{/* Labeled — "OR" pattern */}
<Divider>
  <Typography variant="overline">OR</Typography>
</Divider>

Quick Start

{/* Between sections */}
<Typography variant="h2">Profile</Typography>
<Divider sx="my-6" />
<Typography variant="h2">Notifications</Typography>

{/* OR pattern in sign-in */}
<Button color="primary" fullWidth>Continue with Google</Button>
<Divider sx="my-4">OR</Divider>
<TextField name="email" label="Email" />

{/* Vertical inside a Stack row */}
<Stack direction="row" align="center" gap={3}>
  <Typography>Item A</Typography>
  <Divider orientation="vertical" sx="h-6" />
  <Typography>Item B</Typography>
</Stack>

Divider vs Stack divider prop

Both insert visual separators between things. Use which one:

Examples

Variants — line style

import { Divider, Stack, Typography } from '@dashforge/tw';

<Stack gap={3}>
  <Typography variant="body2">Section A — first paragraph</Typography>
  <Divider />
  <Typography variant="body2">Section B — after solid divider</Typography>
  <Divider variant="dashed" />
  <Typography variant="body2">Section C — after dashed divider</Typography>
</Stack>

<Divider />                        {/* solid (default) */}
<Divider variant="dashed" />
<Divider variant="dotted" />

Solid for the canonical separator. Dashed/dotted for "draft state", "less authoritative", or simply visual variety.

Color intent

<Divider />                       {/* neutral */}
<Divider color="primary" />
<Divider color="success" />
<Divider color="warning" />
<Divider color="danger" />

Colored dividers are useful when the divider IS the message: a red one above an "Irreversible action" section, a green one between "Old plan" and "New plan" in an upgrade flow.

Labeled — the "OR" separator

<Divider>OR</Divider>
<Divider><Typography variant="overline">OR</Typography></Divider>
<Divider>Continue with</Divider>
<Divider><strong>Section title</strong></Divider>

Any node works as the label — string, Typography element, custom JSX. Recommended: <Typography variant="overline"> for short uppercase labels (matches the meta-text rhythm of section kickers).

The implementation renders two flex line segments either side of the label, with a small horizontal padding around the label so it doesn't kiss the lines.

Label alignment

<Divider align="start">  Title hugs left</Divider>
<Divider align="center">Title centered (default)</Divider>
<Divider align="end">    Title hugs right</Divider>

start/end leave a short ~32px stub on the squashed side (rather than collapsing to zero) so the divider visually exists on both sides regardless of alignment.

Vertical

{/* Between row items */}
<Stack direction="row" align="center" gap={3}>
  <Typography variant="body2">Logged in</Typography>
  <Divider orientation="vertical" sx="h-4" />
  <Typography variant="body2" color="muted">2 minutes ago</Typography>
</Stack>

{/* As a column splitter */}
<Box fullHeight>
  <Stack direction="row" fullHeight>
    <NavSidebar />
    <Divider orientation="vertical" />
    <MainContent />
  </Stack>
</Box>

Vertical dividers need a height context — they take the height of their parent flex row via self-stretch. When that doesn't work (no flex parent), set sx="h-N" explicitly.

Section separator inside a settings card

<Box variant="outlined" rounded="xl" p={6}>
  <Typography variant="h3">Profile</Typography>
  <Stack gap={3} sx="mt-4">
    <TextField name="name" label="Display name" />
    <TextField name="email" label="Email" />
  </Stack>

  <Divider sx="my-6" />

  <Typography variant="h3">Security</Typography>
  <Stack gap={3} sx="mt-4">
    <Switch label="Two-factor authentication" />
  </Stack>
</Box>

Sign-in OR pattern

import { Divider, Stack, Button, Typography } from '@dashforge/tw';

<Stack gap={4}>
  <Button color="primary" fullWidth>Sign in with Google</Button>
  <Divider>
    <Typography variant="overline" color="muted">OR</Typography>
  </Divider>
  <Button variant="outline" fullWidth>Continue with email</Button>
</Stack>

<Stack gap={4}>
  <Button color="primary" fullWidth>Continue with Google</Button>
  <Button variant="outlined" fullWidth>Continue with GitHub</Button>

  <Divider>
    <Typography variant="overline" color="muted">or</Typography>
  </Divider>

  <Stack gap={3}>
    <TextField name="email" type="email" label="Email" />
    <TextField name="password" type="password" label="Password" />
    <Button color="primary" fullWidth>Sign in</Button>
  </Stack>
</Stack>

API

Props

Rendering modes

a11y

• Root element: role="separator" (implicit on <hr>, explicit on <div>)
• aria-orientation: "horizontal" or "vertical" always set
• In labeled mode: line segments are aria-hidden (the separator role lives on the root; duplicating on children would confuse AT)

Variant catalogue

import { dividerVariants, dividerLineVariants } from '@dashforge/tw';
// dividerVariants({ orientation: 'horizontal', align: 'center' }) → root className
// dividerLineVariants({ orientation: 'horizontal', variant: 'solid', color: 'primary', segment: 'grow' }) → line className

Two TV recipes (root + line) because labeled mode renders 3 elements while line-only mode renders 1 — splitting keeps each catalogue small.

Notes

• <hr> for horizontal line-only: gives implicit role="separator" for screen readers without an extra attribute. We zero out the UA default border via border-0 and re-apply ours.
• Vertical line-only renders <div> because <hr> can't be vertical cross-browser-consistently. Same role="separator" is set explicitly.
• Labeled vertical dividers are rare: supported for parity but the typical use is line-only between flex row items. Test coverage is light here — file an issue if you hit a regression.
• align="start" / "end" uses a 32px stub on the squashed side rather than collapsing to zero — keeps the divider visually present on both sides.
• flexItem is a no-op for now: self-stretch is already on the vertical line by default. Kept in the API for MUI Divider parity and as a forward-compat hook.

When NOT to use

• For per-row separators in a list: use <Stack divider={<Divider />}> instead of intermingling <Divider /> between every child. The Stack divider prop handles N-1 insertion cleanly.
• For section spacing: a Divider adds visual noise; sometimes just <Box sx="mt-12"> (more vertical space) communicates the section break without an explicit line.
• For table row borders: those are part of the Table chrome (when we ship one), not standalone Dividers.