RZREDZ.UI

Empty states

What a list, a panel or a search shows when it has nothing yet: what would be here, and the one action that starts it. And the drop zone of a file field.

Examples

No excursions yet

An excursion is a page with a price, a schedule and a booking form.

<div class="empty-state">
	<i class="bi bi-compass" aria-hidden="true"></i>
	<strong class="text-body">No excursions yet</strong>
	<p>An excursion is a page with a price, a schedule and a booking form.</p>
	<button class="btn btn-primary" type="button"><i class="bi bi-plus-lg" aria-hidden="true"></i>New excursion</button>
</div>

A drop zone

empty-state-drop is a label around a hidden file input: a click or a dropped file goes to the input.

<label class="empty-state empty-state-drop">
	<span class="icon-tile icon-tile-sm"><i class="bi bi-upload" aria-hidden="true"></i></span>
	<span class="vstack gap-2"><strong class="text-body">Logo · light theme</strong><span class="form-text">SVG or PNG, drop a file or choose</span></span>
	<input class="visually-hidden" type="file" accept="image/svg+xml,image/png">
</label>

States

classrest:hover
empty-state-drop

Accessibility

  • Say what would be here and why it is empty - "No excursions yet", "Nothing matches the filters" - and offer the action that changes it.
  • The drop zone's file input is hidden visually only; its label is the zone's words, and the focus ring shows on the zone through the label.

Tokens

From css/components/empty-state.css, which declares no custom property of its own.

It reads the theme's --redz-space-8, --redz-space-32, --redz-space-16, --redz-text-muted, --redz-text-faint, --redz-space-12, --redz-border-strong, --redz-radius-12, --redz-primary, --redz-primary-subtle.