Empty state

There is nothing here yet, and here is what would change that.

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.

<div class="wsu-empty" role="status">
  <svg class="wsu-icon wsu-icon--lg" aria-hidden="true"><use href="/assets/wayne-ui/icons.svg#wsu-book-open"/></svg>
  <p>No saved course plans yet.</p>
  <button class="wsu-btn wsu-btn--outline wsu-btn--sm" type="button">Create a plan</button>
</div>

<x-wsu::empty-state icon="book-open" message="No saved course plans yet.">
    <x-slot:action>
        <x-wsu::button variant="outline" size="sm">Create a plan</x-wsu::button>
    </x-slot:action>
</x-wsu::empty-state>

<EmptyState icon="book-open" message="No saved course plans yet.">
  <template #action>
    <Button variant="outline" size="sm">Create a plan</Button>
  </template>
</EmptyState>

Why it works this way

An empty region with no explanation is indistinguishable from a page that failed to load, so this always says something and usually offers the action that would fill it.
role="status", so the message is announced when a filter or search empties the list. Otherwise a screen reader user applies a filter, hears nothing, and goes looking for results that are not there.
The display-size icon uses .wsu-icon--lg rather than an inline style, so Blade, Vue and static HTML emit the same markup.

Accessibility

role="status" for the live announcement (4.1.3).
The icon is decorative and the text carries the message (1.1.1).

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
`icon`	`null`	Rendered at display size.
`message`	`null`	Or use the default slot.
`live`	`true`	role="status". Turn off for a state that is present on first paint.

Vue

Prop	Type and default	What it does
`icon`	`String, ''`	Rendered at display size.
`message`	`String, ''`	Or use the default slot.
`live`	`Boolean, true`	role="status". Set false for a state that is present on first paint.

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

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`div`	`role`	1

Empty state ​