Dot
A dot is an 8px live state beside its words. It never stands alone.
Tones
Live Needs a person Idle
Show code
<KbDot tone="teal" label="Live" /> Live
<KbDot tone="ruby" label="Needs a person" /> Needs a person
<KbDot label="Idle" /> IdleWhen to use
- Use a dot next to a name or a label to show it is live, idle or needs a person.
- Always write the state in words beside it.
- Use a lozenge for a status; a dot only marks liveness.
Needs a person
Import
import { KbDot } from "@/components/ui/KbBadge";
<KbDot tone="teal" label="Live" /> LiveProps
| Prop | Type | Default | What it does |
|---|---|---|---|
tone | "ink" | "ruby" | "teal" | "ink" | Idle, needs a person, live. |
label | string | None | Spoken name of the state. Omit when words sit right beside it. |
Keyboard and screen readers
- With a label the dot is announced as an image with that name; without one it is decorative.
- The dot colour has 3:1 contrast on every surface.
- The state is always in words next to it.