Separator

A thin rule that divides content along one axis — horizontally between stacked sections, or vertically between inline items.

When to use

• To split a stack of content into clearly delimited sections.
• To divide inline items, such as a row of metadata or breadcrumb-style links.
• Inside a Card or View where you need a divider that is not a full Card.Divider.

When not to use

• As decorative spacing — reach for margin or gap instead; a separator implies a boundary.
• To outline a container — use a border on the container itself.

Installation

pnpm add @nordcom/nordstar-separator

import { Separator } from '@nordcom/nordstar';

Basic usage

A horizontal rule is the default. It is decorative by default, so assistive tech ignores it.

import { Separator } from '@nordcom/nordstar';

export default function Example() {
    return (
        <div className="flex flex-col gap-4">
            <p>Shipping address</p>
            <Separator />
            <p>Billing address</p>
        </div>
    );
}

Vertical

Set orientation="vertical" for inline dividers. Give the parent a height (or let flex stretch it) so the rule has something to fill.

import { Separator } from '@nordcom/nordstar';

export default function Example() {
    return (
        <nav aria-label="Docs" className="flex h-6 items-center gap-4 text-sm">
            <span>Docs</span>
            <Separator decorative={false} orientation="vertical" />
            <span>Components</span>
            <Separator decorative={false} orientation="vertical" />
            <span>Tokens</span>
        </nav>
    );
}

Props

Accessibility

• Don't make purely visual rules non-decorative; it adds noise to screen-reader output.
• When a separator does carry meaning (e.g. between groups in a menu), decorative={false} lets assistive tech perceive the same structure sighted users do.