PRIMITIVES

Separator

Horizontal or vertical divider with three Memphis-aware variants. Composes the Radix Separator primitive, so its semantics flip between decorative and meaningful via decorative.

Import

import { Separator } from 'damo-ui'

Solid (default)

<Separator />

Variants

1<Separator variant="dashed" />
2<Separator variant="memphis-double" />

Vertical

Left
Right
1<div className="flex h-8 items-center gap-3">
2  <span>Left</span>
3  <Separator orientation="vertical" />
4  <span>Right</span>
5</div>

Props

Separator props
PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the divider.
variant'solid' | 'dashed' | 'memphis-double''solid'solid is a single hairline; dashed switches to a dashed border; memphis-double is a double-bordered slab matching the Memphis aesthetic.
decorativebooleantrueWhen true (default), the separator is purely decorative and hidden from screen readers. Pass false when the divider conveys meaningful structure that should be announced.
classNamestring—Tailwind classes are merged on top of the variant defaults.

Accessibility

  • Defaults to decorative=true — no role is announced. Use this for purely visual separation.
  • Set decorative=false when the divider represents meaningful structure (e.g. between thematic page sections); Radix exposes role="separator" with the right aria-orientation.
← ScrollAreaOrnament →