Rule

A plain hairline divider. Use it where two blocks need separating and whitespace alone isn't enough; most sections need neither, because the heading does the separating. A label is optional and sentence case.

jsx

<Rule />
<Rule tone="brass" label="Executors" />
<Rule onDark />

Props: tone (plain/brass), label (optional, sentence case), onDark. draw is retired and ignored.

Don't: put a diamond, dingbat or uppercase tracked label on the rule, or use a labelled rule as a section heading. See readme · Guardrails.

Preview

Declarations

TypeScript

export interface RuleProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Hairline colour. */
  tone?: 'plain' | 'brass';
  /** Optional sentence-case label, set at the left of the line. Omit for a
   *  plain hairline (the usual case). */
  label?: string | null;
  /** @deprecated Retired Sept 2026 — accepted and ignored. Motion is pending
   *  its own review; do not reintroduce a scroll ceremony here. */
  draw?: boolean;
  onDark?: boolean;
  className?: string;
}

/**
 * A plain hairline divider, optionally labelled. No ornament.
 */
export function Rule(props: RuleProps): React.JSX.Element;