Dot

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add dot

Usage#

import { Dot } from "@/components/ui/dot"

export function Example() {
  return (
    <span className="inline-flex items-center gap-2">
      <Dot tone="success" /> Online
    </span>
  )
}

Anatomy#

import { Dot } from "@/components/ui/dot"

<Dot />

Tones#

A tone takes its colour from a semantic role, so it re-themes across all four themes with the rest of the system. neutral is the default (the muted ink, for offline or idle), and current follows the text colour around it.

Free colour#

When the colour comes from data (a department, a call category, a team), pass it as color: any CSS colour, hex, rgb(), hsl() or a var(). It overrides tone, and the halo of a ping follows it too.

Shapes#

round is a status light. square is a swatch, a small rounded square for a colour that identifies something rather than describes its state: the department beside a callsign, the paint of a vehicle. Its corner is a quarter of its side at every size, so it never rounds into a circle.

Sizes#

xs 6px for dense rows and inside chips, sm 8px (the default) beside body text, md 10px for a swatch or a light that has to be seen from across the screen.

Ring#

A white or pale colour vanishes on a white card. ring lays a hairline over the edge (black at low alpha in the light themes, white in the dark ones), inside the box, so the dot keeps its size. Turn it on whenever the colour comes from data and could be light.

Pulse#

blink is a recording light: one second on, one second off, the cadence a camera or a bodycam uses for “REC”. ping sends a halo out of the dot, the signal for live, on air or on duty. Both stand down under reduced motion: the blinking dot stays lit and the halo is not drawn, so the state still reads, it just holds still.

In a roster#

The two shapes side by side: a square for who the unit belongs to, a round light for what it is doing. The department colours are plain hex strings from the data, ringed because one of them is nearly white.

Accessibility#

Without a label the dot is decorative (aria-hidden): the text beside it says the same thing, so it is announced once. With a label it becomes an image named by it (role="img"), for a mark that carries meaning nothing else on screen spells out, such as the department square beside a callsign. Never let colour be the only signal: pair a status light with its word, or give the dot a label.

API reference#

FAQ#