Components

Empty state

A centered placeholder for empty collections, zero-result searches, and first-run screens. A large faint ds-empty__icon, a title-voiced ds-empty__title, a soft width-constrained ds-empty__desc, and an optional ds-empty__actions row.

With actions

Icon, title, description, and a centered action row beneath.

Icon · title · desc · actions

No missions yet

Create your first mission to compute a day rate, margin, and target salary.

<div class="ds-empty">
  <div class="ds-empty__icon" aria-hidden="true"><svg>…</svg></div>
  <p class="ds-empty__title">No missions yet</p>
  <p class="ds-empty__desc">Create your first mission to compute a day rate…</p>
  <div class="ds-empty__actions">
    <button class="ds-button ds-button--primary">New mission</button>
    <button class="ds-button">Import</button>
  </div>
</div>

Minimal

Icon, title, and description only — no actions.

No results

No missions match your filters. Try widening the rate range or clearing the status filter.

<div class="ds-empty">
  <div class="ds-empty__icon" aria-hidden="true"><svg>…</svg></div>
  <p class="ds-empty__title">No results</p>
  <p class="ds-empty__desc">No missions match your filters…</p>
</div>

React

The EmptyState component takes icon, title, description, and actions nodes.

import { EmptyState, Button } from "@diametral/design-system/react";

<EmptyState
  icon={<InboxIcon />}
  title="No missions yet"
  description="Create your first mission to compute a day rate, margin, and target salary."
  actions={<Button variant="primary">New mission</Button>}
/>