# StatusDot

> `StatusDot` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

Source: https://ui.jcsoftdev.com/docs/components/status-dot

`StatusDot` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

## Import

```ts
import { StatusDot } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/status-dot`.

## Usage

```tsx
<StatusDot tone="success" label="Pagado" showLabel shape="dot" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` * | `"danger" \| "neutral" \| "warning" \| "success" \| "accent"` |  |  |
| `label` * | `string` |  | Text describing the status: color is never the only signal. |
| `showLabel` | `boolean` |  |  |
| `shape` | `"dot" \| "square"` | `"dot"` |  |
| `hollow` | `boolean` |  | Hollow variant: transparent fill with an accent inner ring. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/atoms-statusdot--default)
- [Square](/storybook/?path=/story/atoms-statusdot--square)
- [Hollow](/storybook/?path=/story/atoms-statusdot--hollow)
- [Label Hidden](/storybook/?path=/story/atoms-statusdot--label-hidden)
- [All Tones](/storybook/?path=/story/atoms-statusdot--all-tones)

## Source

`packages/ui/src/atoms/status-dot/status-dot.tsx`