Dot

Dot component for indicating status, color, or presence. Uses semantic design token variants by default, with optional custom color override.

In stock

Low stock

Discontinued

Usage

import { Dot, DOT_TONE_BG_CLASSES, DotProps, dotVariants } from "@desk/ui/components/dot";

Use Dot for a bare colour/status indicator with no text; if you need a label or count, reach for Badge (or BadgeDot), and for a removable/interactive chip use Tag.
Prefer the semantic tone (success/warning/danger/…) over a raw color so the dot tracks theme tokens; reserve color for swatches outside the palette.
The dot is decorative — pair it with visible text or an aria-label; colour alone doesn't convey status to assistive tech.

Prop	Type	Default	Description
color	`string`		Custom color override. When provided, overrides the variant color. Can be any valid CSS color value.
size	`ResponsiveValue<"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl">`	`"base"`	Dot size — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.
tone	`"neutral" \| "brand" \| "danger" \| "warning" \| "success" \| "info" \| null \| undefined`

Used by