Separator
StableA 1 pixel line between groups, horizontal or vertical, announced as a separator.
A <div role="separator"> painted with the line token, so it follows the theme. Horizontal by default and full width; vertical stretches to the height of its row. Space around it comes from your classes (my-4, gap-3).
Updated View source
Horizontal and vertical
import { Separator } from '@rchursin/product/ui'
/** Horizontal between blocks, vertical between items in a row. Both are 1px of the line token. */export default function SeparatorBasic() { return ( <div className="lux-card w-full max-w-sm rounded-2xl bg-raised p-5"> <h3 className="text-[15px] font-semibold tracking-[-0.01em]">Weekly review</h3> <p className="mt-1 text-[13px]/6 text-fg-3">Every Friday at 4:00 PM, 30 minutes.</p> <Separator className="my-4" /> <div className="flex h-5 items-center gap-3 text-[13px] text-fg-2"> <span>6 people</span> <Separator vertical /> <span>Video call</span> <Separator vertical /> <span>Repeats weekly</span> </div> </div> )}Usage
import { Separator } from '@rchursin/product/ui'<Separator className="my-4" /><Separator vertical />API
Separator props
| Prop | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | A 1 pixel wide line that stretches to the height of its flex row (self-stretch), with aria-orientation="vertical". |
className | string | – | Margins and anything else, e.g. "my-4". |
Accessibility
- It has role="separator" and aria-orientation, so screen readers can announce the break between groups.
- It isn’t focusable, which is right for a static divider: it is not a splitter you can drag or resize.
- For a line that is only decoration inside one group, a border is quieter: it adds nothing to the accessibility tree.
Guidelines
Do
- Separate groups that mean different things.
- Give it room with margin or gap classes.
Don’t
- Don’t separate every row of a list; use spacing, or borders on the rows.
- Don’t use it as a resize handle; it has no keyboard or pointer behaviour.
In use
Related
- HairlinesA 1px rule that fades out at both ends, and a lit top edge for dark panels.
- SectionA page band with an eyebrow, an h2 and a lead, on a plain or sunken ground. SectionHeading is the heading block alone.
- ColourTwelve semantic greys that switch with the theme, and six fixed brand values for the logo and brand panels.
Source
The component’s own files, exactly as they run on this site.
/** * Small pieces: avatars, chips, tooltip, empty state. */import { cloneElement, isValidElement, useEffect, useId, useRef, useState, type ReactElement, type ReactNode,} from "react"import { cx } from "../../components/cx"import { Icon, type IconName } from "../icons/Icon"import { computePosition } from "./popover"
/* ---------- Avatar: initials on a grey square (the brand square, softened) ---------- */
const tones = [