Separator Dot

Examples

Overview

A 4px square dot for separating inline metadata, the • in rows like Private • 9 Files. It is a <span>, so it accepts any span prop.

import { SeparatorDot } from "@rogo-technologies/ui/separator-dot";

<SeparatorDot />;

Prefer it over a literal •, ·, or • character. Glyphs shift with the font, sit at a different optical height than the text they separate, and are read aloud by screen readers unless every call site remembers to hide them. SeparatorDot is aria-hidden by default.

Usage

It is always square

The dot matches Rogo's radius-0 language, and that is not overridable: a rounded-* class passed via className is discarded. Every hand-rolled copy of this dot in the product had drifted round before it was consolidated here, so the shape is enforced by the component rather than left to the call site.

// Still square.
<SeparatorDot className="rounded-full" />

Round dots remain correct for things that are not separators: markdown list bullets, status and notification dots, label colour swatches, and drag handles. Reach for a plain styled element there, not this component.

Color

The default is --text-quaternary at 60%, which reads as a quiet mark against body copy. In a row that already sets a text color, pass bg-current so the dot tracks it.

<div className="text-tertiary flex items-center gap-2">
  <span>May 24, 2026</span>
  <SeparatorDot className="bg-current" />
  <span>3:15pm</span>
</div>

Size

size-1 (4px) is the default. Dense rows can drop to size-0.5; anything larger starts reading as a status dot rather than punctuation.

<SeparatorDot className="size-0.5" />

Alignment

The dot has no text content, so a flex row is what centers it. Under items-center it lands mid-line with no extra work. Under items-baseline it sits on the baseline instead of at mid-height, which reads too low, so add self-center there.

<div className="flex items-baseline gap-1.5">
  <span>$4.2M</span>
  <span>EV</span>
  <SeparatorDot className="self-center" />
  <span>$1.1M</span>
</div>

Rules versus dots

SeparatorDot separates items within a line. For a hairline rule between blocks or alongside a group of inline controls, use Separator.