Dot

A small status mark, with or without a label.

import { Dot } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function DotBasic() {
  return (
    <Preview>
      <Dot.Root tone="fatal">Fatal</Dot.Root>
      <Dot.Root tone="error">Error</Dot.Root>
      <Dot.Root tone="warning">Warning</Dot.Root>
      <Dot.Root tone="info">Info</Dot.Root>
      <Dot.Root tone="success">Success</Dot.Root>
      <Dot.Root tone="debug">Debug</Dot.Root>
      <Dot.Root tone="accent">Accent</Dot.Root>
      <Dot.Root aria-label="Status" />
    </Preview>
  );
}

• Log levels use fatal, error, warning, info and debug; trace status uses info for OK and error for failures.
• success marks something connected, enabled or healthy in settings: a connected integration, an active channel, an enabled webhook.
• The label takes the tone’s colour for fatal, error, warning and accent. For info and success it stays secondary, for debug muted.
• A dot without text needs an aria-label, such as the alert dot in the sidebar. It then gets role="img".

API

Parts: Root. Other props go to the native span.