Dot

A dot is a solid status marker, usually sitting on an icon. The default fill is danger. af-is-primary, af-is-secondary, af-is-tertiary, af-is-success, af-is-warning, af-is-danger, and af-is-info set the fill to that intent color.

The ring uses --af-dot-ring (surface by default) so the dot stays readable on the surface behind it. Set that custom property when the surface changes, for example on a selected tab.

Basic usage

The dot has no visible text, so give it role="img" and an aria-label. A plain span drops aria-label.

<span class="af-dot" role="img" aria-label="New notifications"></span>

Colors

<span class="af-dot" role="img" aria-label="Danger"></span>
<span class="af-dot af-is-primary" role="img" aria-label="Primary"></span>
<span class="af-dot af-is-success" role="img" aria-label="Success"></span>
<span class="af-dot af-is-warning" role="img" aria-label="Warning"></span>
<span class="af-dot af-is-info" role="img" aria-label="Info"></span>

On an icon

Place the dot inside a positioned icon. af-tabbar already positions .af-tabbar-icon > .af-dot. The icon graphic stays hidden; the dot carries the status.

<span class="af-tabbar-icon">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M4 6h16v12H4z" />
  </svg>
  <span class="af-dot" role="img" aria-label="New notifications"></span>
</span>