Components · Status

Badge Dot

A dot is a small status marker without text.

How to add it to a page. The file is components/css/badge.css.

Basic Usage

Link the shared file once per page. Never copy the rules.

StepWhat to do
1. Link<link rel="stylesheet" href="/components/css/badge.css">. Both templates already have it.
2. ChooseClass badge-dot + a state and a size when needed.
3. Hide itA dot is decorative: aria-hidden="true". Say the status in text.

Dot

API

Classes

ClassUse
badge-dotThe dot. Large (10px), Danger by default.
badge-dot--warning, --success, --info, --neutralState. Danger is the default.
badge-dot--md, --smSize: 8px, 6px.

Things to know

  • The dot has no margin. Set the gap or the position on the page.
  • Never stack dots or put them close to each other.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it.

CSS (components/css/badge.css)