FairGarden Design

Separator

A line that divides content and is announced to assistive technology, built on Base UI's Separator.

import { Separator } from '@fairgarden-private/design/components/Separator'

Use it where the grouping would otherwise be unclear. Typographic separators (· • | ›) are text, not this component.

Variants and orientation

Variants and orientation

rule (the default) is a boundary a reader must find, in --role-rule. hairline is for places where whitespace and type also carry the structure. dotted marks a relation inside a solid-bounded group, doubleHair a total or running header, and ruleDot a thematic break. There is no dashed variant: dashes never divide. orientation is Base UI's own prop.

rule
hairline
dotted
doubleHair
ruleDot
TrailsMapsEvents
SeparatorVariants.tsx
import { Separator } from '@fairgarden-private/design/components/Separator'
import styles from './variants.module.css'

const variants = ['rule', 'hairline', 'dotted', 'doubleHair', 'ruleDot'] as const

export function SeparatorVariants() {
  return (
    <div className={styles.stack}>
      {variants.map((variant) => (
        <div key={variant} className={styles.row}>
          <code className={styles.name}>{variant}</code>
          <Separator variant={variant} />
        </div>
      ))}
      <div className={styles.inline}>
        <span>Trails</span>
        <Separator orientation="vertical" variant="hairline" />
        <span>Maps</span>
        <Separator orientation="vertical" variant="hairline" />
        <span>Events</span>
      </div>
    </div>
  )
}

Primary scale

Primary scale

Rules and hairlines are primary roles, so primary recolors them. secondary is accepted for consistency, but no separator part draws in an accent.

scope default (olive)primary="plum"primary="indigo" variant="doubleHair"
SeparatorColor.tsx
import { Separator } from '@fairgarden-private/design/components/Separator'
import styles from './color.module.css'

/** Rules and hairlines are primary roles: `primary` recolors them. */
export function SeparatorColor() {
  return (
    <div className={styles.stack}>
      <code className={styles.name}>scope default (olive)</code>
      <Separator />
      <code className={styles.name}>primary=&quot;plum&quot;</code>
      <Separator primary="plum" />
      <code className={styles.name}>primary=&quot;indigo&quot; variant=&quot;doubleHair&quot;</code>
      <Separator primary="indigo" variant="doubleHair" />
    </div>
  )
}

On grounds

On paper, forest and leaf

paper
forest
leaf
SeparatorGrounds.tsx
import { PresetGround } from '@/components/PresetGround'
import { Separator } from '@fairgarden-private/design/components/Separator'
import styles from './grounds.module.css'

const presets = ['paper', 'forest', 'leaf'] as const

export function SeparatorGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <span className={styles.name}>{preset}</span>
          <Separator />
          <Separator variant="hairline" />
          <Separator variant="ruleDot" />
        </PresetGround>
      ))}
    </div>
  )
}

API Reference

A separator announced to assistive technology (Base UI). Use it where the grouping would otherwise be unclear; typographic separators (· • | ›) are text, composed from this module’s glyph / glyphInk parts by the host. ruleDot is horizontal only.

PropTypeDescription
primary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| null
| undefined

Primary Radix scale: the line color. Never defaulted; omitted, it inherits the host’s scope [D133].

secondary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| 'amber'
| 'blue'
| 'cyan'
| 'grass'
| 'green'
| 'jade'
| 'lime'
| 'mint'
| 'orange'
| 'sky'
| 'teal'
| 'yellow'
| null
| undefined

Secondary Radix scale, accepted for the shared color contract; no separator part draws in an accent. Never defaulted.

variant
| 'rule'
| 'hairline'
| 'dotted'
| 'doubleHair'
| 'ruleDot'
| null
| undefined

The line by role: rule (default) in --role-rule, a division the reader must find; hairline in --role-hairline, where whitespace also carries structure; dotted for relation subdivisions only; doubleHair for totals and running headers; ruleDot for a thematic break (horizontal only).

separator

Separator (§9.12). variant names the line by role and style, within what §4.2 allows a separator: solid rule (default, --role-rule) and hairline (--role-hairline), dotted (relation subdivisions only), doubleHair (totals, running headers) and ruleDot (the rule–dot–rule thematic break). No dashed value: dashes never divide [D35]. Orientation is Base UI’s own prop. Color axes inherit the host’s scope [D133].

type separator = separator
SeparatorProps

Props for Separator: Base UI Separator props (including orientation) plus the variant and color axes.

type SeparatorProps = {
  /**
   * The line by role: `rule` (default) in `--role-rule`, a division the
   * reader must find; `hairline` in `--role-hairline`, where whitespace also
   * carries structure; `dotted` for relation subdivisions only; `doubleHair`
   * for totals and running headers; `ruleDot` for a thematic break
   * (horizontal only).
   */
  variant?: 'rule' | 'hairline' | 'dotted' | 'doubleHair' | 'ruleDot' | null;
  /**
   * Primary Radix scale: the line color. Never defaulted; omitted, it
   * inherits the host's scope [D133].
   */
  primary?:
    | 'ruby'
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | null;
  /**
   * Secondary Radix scale, accepted for the shared color contract; no
   * separator part draws in an accent. Never defaulted.
   */
  secondary?:
    | 'ruby'
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | 'amber'
    | 'blue'
    | 'cyan'
    | 'grass'
    | 'green'
    | 'jade'
    | 'lime'
    | 'mint'
    | 'orange'
    | 'sky'
    | 'teal'
    | 'yellow'
    | null;
}
SeparatorVariant
type SeparatorVariant = 'rule' | 'hairline' | 'dotted' | 'doubleHair' | 'ruleDot'<
  'rule' | 'hairline' | 'dotted' | 'doubleHair' | 'ruleDot' | null | undefined
>
SeparatorVariants
type SeparatorVariants = {
  primary?:
    | 'ruby'
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | null;
  secondary?:
    | 'ruby'
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | 'amber'
    | 'blue'
    | 'cyan'
    | 'grass'
    | 'green'
    | 'jade'
    | 'lime'
    | 'mint'
    | 'orange'
    | 'sky'
    | 'teal'
    | 'yellow'
    | null;
  variant?: 'rule' | 'hairline' | 'dotted' | 'doubleHair' | 'ruleDot' | null;
}

Specification: DESIGN-SYSTEM.md §9.12 (separator) and §4.2 (line semantics).