component

TuxEmptyState

The "no data yet" pattern extracted. Icon in a tinted circle, heading, one sentence of context, and a CTA — always tell users what to do next, not just that there's nothing here.

first-run

With action

No projects yet

Create your first project to start tracking deliverables.

<tux-empty-state
  icon="lucide:folder-plus"
  title="No projects yet"
  description="Create your first project to start tracking deliverables."
>
  <tux-button intent="primary" icon="lucide:plus">
    Create project
  </tux-button>
</tux-empty-state>

compact

Minimal

No description, no action. Fine for transient "loaded zero rows" cases where there's nothing actionable the user can do.

No records found

<tux-empty-state
  icon="lucide:inbox"
  title="No records found"
/>

inline

Without card frame

Pass no-card when the empty state IS the page — e.g. a "no search results" state that fills the content column directly.

Nothing matches `bridge inspections`

Try a broader keyword or clear filters.

<tux-empty-state
  no-card
  icon="lucide:search-x"
  title="Nothing matches `bridge inspections`"
  description="Try a broader keyword or clear filters."
/>

compact

Smaller-scale variant

Pass compact when the empty state lives inside a narrow column or tight panel — facet results, inline list area, sidebar widget. Reduces icon, heading, and padding without changing the content shape.

No matches in this facet

Try widening one of the active filters.

<tux-empty-state
  compact
  icon="lucide:filter-x"
  title="No matches in this facet"
  description="Try widening one of the active filters."
/>

presets

Named preset kinds

Pass kind to use one of the five most-reused empty- state shapes. Each preset pre-fills icon + title + description; explicit icon / title / description props still win when set.

No data yet

When records arrive, they'll show up here.

No matches

Try a broader query, or clear the active filters.

Not found

The item you're looking for doesn't exist or has been removed.

Access required

You don't have permission to view this. Contact your administrator if you think that's a mistake.

Welcome

Get started by creating your first item.

<!-- Five preset kinds: no-data, no-results, not-found,
     no-permissions, first-run. Each fills sensible defaults. -->
<tux-empty-state kind="no-results">
  <tux-button intent="ghost" icon="lucide:filter-x">Clear filters</tux-button>
</tux-empty-state>

preset override

Preset + per-field override

Mix and match: use a preset as the baseline, then override the title or description to match the surface's voice. The icon still defaults from the preset unless you replace it too.

Welcome to Landscape

Get started by creating your first item.

<!-- Override one field; preset fills the rest. -->
<tux-empty-state kind="first-run" title="Welcome to Landscape">
  <tux-button intent="primary" icon="lucide:plus">Create your first index</tux-button>
</tux-empty-state>