---
title: Dot
description: A small status mark, with or without a label.
---

```tsx
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

| Prop | Type | Default | Description |
| - | - | - | - |
| `size?` | `"sm" \| "md"` | `"md"` | Label text size. Use `sm` in a toolbar. |
| `tone?` | `"fatal" \| "error" \| "warning" \| "info" \| "success" \| "debug" \| "accent"` | `"info"` | |

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