Status Dot

Beta

A coloured dot with a label for the state of an account, card, payment or service.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add status-dot
Also works with shadcn: npx shadcn@latest add @ritla/status-dot
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

status-dot.tsx

import { StatusDot } from "@/components/ui/status-dot";<StatusDot status="success">Active</StatusDot>

Prop	Type	Default	Description
`status`	`"success" \| "warning" \| "danger" \| "info" \| "neutral"`	None	Figma's Status.
`children`	`ReactNode`	None	Figma's Label.
`label`	`string`	None	Names the dot when the label is off.

Colour never carries the meaning alone: keep the label, or name the dot with label.
Use a Badge when the state needs more weight.