Separator

When to use

• Dividing groups in a Menu or a Toolbar
• Splitting sections of a page or a card

Not just to add space — use margins or gaps.

Choosing between organising content:

Component	Use it for	For example
Accordion	Sections stacked on one page, of which people read one or a few	FAQ, settings groups, order details
Tabs	Views of the same thing at the same level, one at a time	Account / Billing / Security
Card	A self-contained group of content, shown as one unit, often in a grid or list	A product tile, a project summary
Table	Rows of records compared across the same columns	Invoices, users, order lines
Separator	A line that divides sections, with no content of its own	Between menu groups or toolbar groups

Account

---

Billing

Docs

---

Blog

---

Changelog

import { Separator } from '@arun-dev/ui';

// The Separator draws the line; the gap around it is the layout's.
export default function SeparatorBasics() {
  return (
    <div style={{ display: 'grid', gap: 'var(--space-md)', inlineSize: '24rem' }}>
      <div style={{ display: 'grid', gap: 'var(--space-sm)' }}>
        <p style={{ margin: 0 }}>Account</p>
        <Separator />
        <p style={{ margin: 0 }}>Billing</p>
      </div>
      {/* Upright, between inline items: it takes the row's height. */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Blog</span>
        <Separator orientation="vertical" />
        <span>Changelog</span>
      </div>
    </div>
  );
}

Separator is an <hr>, so assistive technology announces it as a separator. orientation="vertical" stands it upright between inline items. It takes the height of the row it sits in.

Props

Separator props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Across, or upright between inline items. Sets aria-orientation and data-orientation.
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.

Notes

• A purely decorative line takes aria-hidden.
• In a Combobox list, use Combobox.Separator. A listbox may hold only options and groups.
• It draws the line only. Put the space around it in the layout, with gap, so a CSS reset can’t collapse it.
• Restyle with --separator-color and --separator-thickness.