Dot

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

In stock

Low stock

Discontinued

Usage

import { Dot, DOT_TONE_BG_CLASSES, DotProps, dotVariants } from "@instruments/materia-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 colour override. When provided, overrides the variant colour. Can be any valid CSS colour 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