Empty State

The inherited Ecology empty state, wearing the Biochar Atlas skin. A centered icon + title + description + actions block for nothing-here moments — no field selected, no biochars matched, no saved assessments.

Inherited .astro import EsaEmptyState from '@esa/ecology/esa-empty-state.astro';

Basic

Pass an inline SVG via the named icon slot; the default slot holds the call to action.

No field selected

Pick a field on the map or enter coordinates to derive its soil context.

<EsaEmptyState
  title="No field selected"
  description="Pick a field on the map or enter coordinates to derive its soil context."
>
  <svg slot="icon" …map-pin… />
  <EsaButton color="primary">Find a field</EsaButton>
</EsaEmptyState>

Without icon or action

Both the icon slot and the actions are optional — title alone reads as a quiet placeholder row.

No biochars match these filters

Loosen a filter or clear them all.

<EsaEmptyState title="No biochars match these filters" description="Loosen a filter or clear them all." />

Sizes

Four sizes scale icon, type, and padding together — sm fits inside a card body; lg can carry a full page.

No saved assessments

Completed assessments appear here.

No saved assessments

Completed assessments appear here.

<EsaEmptyState title="No saved assessments" size="sm" />
<EsaEmptyState title="No saved assessments" size="lg" />

API

Prop	Type	Default	Description
`title`	`string`	—	Required. The headline of the empty state.
`description`	`string`	—	Optional supporting copy under the title.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Scales the icon, text, and padding together.

Slots: icon (an inline SVG, sized by the component) · default (action buttons under the description).