Indicator

A small status marker positioned relative to another element. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• indicator, indicator-item, indicator-item--start, indicator-item--center, indicator-item--end, indicator-item--top, indicator-item--middle, indicator-item--bottom

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<span class="indicator">
  <span class="indicator-item indicator-item--top indicator-item--end" aria-hidden="true">3</span>
  <a href="/messages" aria-label="Messages, 3 unread">Messages</a>
</span>

Variants and composition

Combine one inline placement (start, center, end) with one block placement (top, middle, bottom) on indicator-item.

Behavior and accessibility

Tie the marker to the target’s meaning with text or an accessible name. Positional modifiers can compose across inline and block axes; a purely decorative dot stays aria-hidden.

Reference

See the interactive Storybook specimen ↗. Continue to Join or return to the Official preset overview.