Status dot

A colored dot with a text label beside it. Five variants, matching Badge.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<span class="wsu-status-dot wsu-status-dot--success">
  <span class="wsu-status-dot__dot" aria-hidden="true"></span>
  Registration open
</span>

<x-wsu::status-dot variant="success">Registration open</x-wsu::status-dot>

<StatusDot variant="success">Registration open</StatusDot>

Why it works this way

The same division of labor as Badge: the word is the status, the color only reinforces it (1.4.1). The dot is generated by the stylesheet off wsu-status-dot__dot rather than passed as a slot, so there is no way to render one with no label next to it.
Every variant carries the same neutral ring regardless of its own fill. --wsu-accent is validated for text sitting on top of it, not for its own edge against the page, and a dot this small has no text on top of it to fall back on: an unringed gold dot on a light surface all but disappears. The ring is --wsu-border-strong, the token already proven at 3:1 against both surfaces, not the decorative --wsu-border.

Accessibility

Text plus color, never color alone (1.4.1).
wsu-status-dot__dot is generated, aria-hidden markup; the label beside it is what a screen reader announces.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`variant`	`'neutral'`	neutral, brand, accent, success or danger.

Vue

Prop	Type and default	What it does
`variant`	`String, 'neutral'`	neutral, brand, accent, success or danger.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-status-dot.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`span`	none recorded	1
public apps/examples/static-html/public-app.html	`span`	none recorded	1

Status dot ​