Miltinson.Design system
GitHub

Separator

Horizontal or vertical hairline divider.

atomsSource
import { Separator } from '@elirobinson/react/components/atoms/Separator';

Styles: @elirobinson/react/styles/atoms/Separator.css — already included when you import @elirobinson/react/styles.css.

Season pass

Single session

Show code
import { Separator } from '@elirobinson/react/components/atoms/Separator';

export default function Basic() {
  return (
    <div className="demo-col">
      <p>Season pass</p>
      <Separator />
      <p>Single session</p>
    </div>
  );
}

When to use it

Use Separator for a hairline divider that marks a real break between content groups — sections, toolbar clusters, nav items. If you just need whitespace, a CSS gap is simpler and skips the ARIA semantics this component adds.

Vertical

A vertical separator has no height of its own — give its flex container a defined height.

PortfolioStore
Show code
import { Separator } from '@elirobinson/react/components/atoms/Separator';

export default function Vertical() {
  return (
    <div className="demo-row" style={{ height: 44 }}>
      <span>Portfolio</span>
      <Separator orientation="vertical" />
      <span>Store</span>
    </div>
  );
}

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical"horizontal—

Also accepts all HTMLAttributes<HTMLDivElement> props.

Accessibility

  • Defaults to role="separator" with aria-orientation matching orientation — a static divider, not a focusable, resizable splitter.
  • role is overridable: if the separator is purely decorative spacing with no thematic-break meaning, pass role="none" yourself to drop it out of the accessibility tree. The default assumes it is meaningful.

Do

  • Use orientation="vertical" inside a flex row with a defined height — a vertical hairline has no height of its own.
  • Let the default role="separator" stand when the divider marks a real content break.
  • Override role="none" yourself when the separator is purely decorative.

Don't

  • Use Separator as a layout spacer where a CSS gap would do — that’s simpler and skips the ARIA semantics.
  • Nest interactive content inside it — it’s a single hairline, not a container.
  • Forget the fixed height for a vertical separator outside a flex context that already constrains height — it collapses to nothing.