ToneDot
A 6px dot (or square) in one of Cynco UI's status tones; toneBg exposes the same background classes for bars and legend keys.
import { ToneDot } from "@cynco-labs/ui";Example
import { ToneDot } from "@cynco-labs/ui";
const tones = ["green", "blue", "amber", "orange", "red", "purple", "neutral"];
export default function ToneDotDemo() {
return (
<div className="flex flex-col gap-2 text-sm text-foreground">
<div className="flex flex-wrap items-center gap-2">
{tones.map((t) => (
<span key={t} className="inline-flex items-center gap-1.5">
<ToneDot tone={t} />
{t}
</span>
))}
</div>
<div className="flex flex-wrap items-center gap-2">
{tones.map((t) => (
<span key={t} className="inline-flex items-center gap-1.5">
<ToneDot tone={t} square />
{t}
</span>
))}
</div>
</div>
);
}Use
A small colour cue next to text that already says the state (account type, autosave, aging bucket).
Props
tone, square, className and any span props (title for a hover hint).
Notes
Decorative (aria-hidden): the meaning must also be in nearby text.