Skip to content
Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

EmptyState

A layout primitive for "nothing here yet" states, rendered as <div is="root-empty-state">.

Usage

No messages

When you receive messages they'll show up here.

No messages

When you receive messages they'll show up here.

<div is="root-empty-state">
  <span data-part="icon" aria-hidden="true">📭</span>
  <h2>No messages</h2>
  <p>When you receive messages they'll show up here.</p>
  <div data-part="actions">
    <button is="root-button" type="button">Refresh</button>
  </div>
</div>

Presentational only: it centres an optional [data-part="icon"], a heading, body copy and an optional [data-part="actions"] group. Content and semantics are the author's - the component just provides the classless layout.

Extends

HTMLDivElement - use with <div is="root-empty-state">.