Badge

A small status pill. The text is not optional.

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-badge wsu-badge--success">Open</span>
<span class="wsu-badge wsu-badge--danger">Closed</span>
<span class="wsu-badge wsu-badge--accent">Waitlist</span>

<x-wsu::badge variant="success">Open</x-wsu::badge>

{{-- In a table cell, where the column header is not read with the cell --}}
<x-wsu::badge variant="danger" sr-label="Enrollment status:">Closed</x-wsu::badge>

<Badge variant="success">Open</Badge>
<Badge variant="danger">Closed</Badge>

Why it works this way

A badge is usually the only thing in its table cell, and its color is usually the only thing separating Open from Closed. A badge with no label is a colored dot, which is information carried by color alone.
srLabel on the Blade component adds the context a sighted reader gets from the column header and a screen reader user, hearing the cell on its own, does not.

Accessibility

Text plus color, never color alone (1.4.1).
Every variant meets its declared contrast against the surface it sits on.

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.
`icon`	`null`	Optional leading icon.
`srLabel`	`null`	Context for a screen reader hearing the cell alone.

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-badge.

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

Badge ​