# Status dot

A small colored dot that marks a status, with the status in words beside it.

Block: `smbk-status-dot`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.

## Options

| Axis | Values | Default | Meaning |
|---|---|---|---|
| `tone` | `success`, `info`, `warning`, `danger`, `default` | `success` | The status the dot marks: success, info, warning and danger take the feedback colors; default the subtle gray, for a status that is neither good nor bad, such as offline. |

Parts: `smbk-status-dot__dot`, `smbk-status-dot__label`

## Markup

```html
<span class="smbk-status-dot smbk-status-dot--tone-success" role="img" aria-label="Online">
  <span class="smbk-status-dot__dot"></span>
</span>
```

## React

```tsx
import { StatusDot } from './design-system/components/status-dot/status-dot.js';

<StatusDot tone="success" aria-label="Online" />
```

## Stylesheet

```css
/* smbk-status-dot — Status dot. Figma "Status dot" 7096:77 (Tone × Label).
 * A round 8 dot in its tone's feedback icon color (the default tone: the subtle
 * icon color, the block's own), then, when given, the status in words in Label SM and the default
 * text color, the small inline step apart. The words are the status; the dot
 * is a cue beside them, never the only one. */

.smbk-status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  vertical-align: middle;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-status-dot__dot {
  flex-shrink: 0;
  width: var(--smbk-size-8);
  height: var(--smbk-size-8);
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-color-icon-subtle);
}

/* ---- tone. The default tone is the block's own look above. ---- */

.smbk-status-dot--tone-success .smbk-status-dot__dot {
  background: var(--smbk-color-feedback-success-icon);
}

.smbk-status-dot--tone-info .smbk-status-dot__dot {
  background: var(--smbk-color-feedback-info-icon);
}

.smbk-status-dot--tone-warning .smbk-status-dot__dot {
  background: var(--smbk-color-feedback-warning-icon);
}

.smbk-status-dot--tone-danger .smbk-status-dot__dot {
  background: var(--smbk-color-feedback-danger-icon);
}

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
   user's own colors. Nothing here applies outside that mode. */

@media (forced-colors: active) {
  /* The dot is a fill and nothing else, so it would vanish. It takes the palette's text color; the words
     beside it, or its name, say which status it is. */
  .smbk-status-dot__dot {
    forced-color-adjust: none;
    background: CanvasText;
  }
}
```

## Tokens it reads

```json
{
  "space": {
    "inline": {
      "sm": {
        "$type": "dimension",
        "$value": "{{space.6}}",
        "$description": "Gap between things side by side, small."
      }
    }
  },
  "color": {
    "text": {
      "default": {
        "$type": "color",
        "$value": "{{color.grey.900}}",
        "$description": "Main text."
      }
    },
    "icon": {
      "subtle": {
        "$type": "color",
        "$value": "{{color.grey.700}}",
        "$description": "Quiet icons."
      }
    },
    "feedback": {
      "success": {
        "icon": {
          "$type": "color",
          "$value": "{{color.green.600}}",
          "$description": "The success tone’s own icon (a check), so the tone is never shown by colour alone."
        }
      },
      "info": {
        "icon": {
          "$type": "color",
          "$value": "{{color.blue.600}}",
          "$description": "The info tone’s own icon (an info sign), so the tone is never shown by colour alone."
        }
      },
      "warning": {
        "icon": {
          "$type": "color",
          "$value": "{{color.orange.600}}",
          "$description": "The warning tone’s own icon (a warning sign), so the tone is never shown by colour alone."
        }
      },
      "danger": {
        "icon": {
          "$type": "color",
          "$value": "{{color.red.600}}",
          "$description": "The danger tone’s own icon (an alert sign), so the tone is never shown by colour alone."
        }
      }
    }
  },
  "typography": {
    "label-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label SM: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    }
  },
  "size": {
    "8": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Raw size step, 8 px. Only for fixed sizes inside a component; semantic sizes (size/control, icon, mark) point here."
    }
  },
  "radius": {
    "full": {
      "$type": "dimension",
      "$value": "{{radius.9999}}",
      "$description": "Capsule: pills, chips, switches."
    }
  }
}
```

## Purpose

Marks a status beside a name, such as a service that is online, a sync that is running or a job that failed: a small round dot in the status' color, with the status in words beside it. The words carry the meaning; the dot lets the eye find the status at a glance.

## Anatomy

- The block, a row as wide as its content.
- The dot part, a small circle in the tone's color: green for success, blue for info, amber for warning, red for danger, and gray for the default tone, a status that is neither good nor bad.
- The label part, the status in words in a small label style, after the dot. It is left out when the status is written somewhere else.

## When to use

- Beside a name in a list, a table or a card, to say the state of the thing named: online or offline, healthy or failing.
- In a footer or a toolbar, for the state of a whole service.

## When not to use

- For a count or a category. Use a [badge](badge.md) or a [tag](tag.md).
- For a message the reader must act on. Use an [alert](alert.md), a [banner](banner.md) or a [toast](toast.md).
- As the only sign of a status. The words, or a name for the dot, are always there.

## Behavior

The dot keeps its size; the words wrap after it when the line is too narrow. Nothing moves and nothing takes focus.

## Accessibility
### What it does for you

- A screen reader hears the words; the dot beside them is hidden from it.
- A dot with no words, given a name through `aria-label`, is read as one image ("Online").
- In high contrast mode every dot takes the text color, and the words tell the statuses apart.
- Nothing about it takes focus.

### What you must do

- Give a dot with no words a name, `aria-label`, so it is read as one image ("Online").
- Hide a dot beside a status already written out with `aria-hidden`.
- Never tell statuses apart by color alone: the words say which one it is.

### How to test

- With a screen reader, each status is read by its words only, and a dot with no words by its name.
- In a forced-color mode, every dot takes the text color and the statuses are still told apart by their words.
- Tab through the page: focus never lands on the dot.

## Usage rules

### Do

- Use a short word or two for the status: "Online", "Syncing", "Failed".
- Keep each tone to one meaning across a page.

### Don't

- Show a dot without words or a name.
- Use the danger tone for anything that is not a failure.