Empty state

Title, one sentence, one action, over a topographic background field.

Add plugin

<mm-empty-state heading="No assets yet" description="No assets have been catalogued from this source yet. Add a plugin to catalogue it.">
  <mm-button slot="action" variant="primary" icon="add">Add plugin</mm-button>
</mm-empty-state>

Guidance

Empty states earn the one decoration Marmot allows: a topographic background field, never an icon or an illustration. The field is an mm-topography sheet behind the text, cropped by the empty state's box and dissolving towards its edges, in hairlines mixed from --mm-rule so the title and sentence keep full contrast. There is no drawing above the heading: one title, one sentence and one action. The title is the text-face heading style (the display face is kept for page titles); the one sentence says what is missing and what to do ("Connect a plugin to catalogue this source."). No mascot, sparkles or stock art, and at most one field per view.

Use compact inside panels: a heading-sm title and no field, so a page of panels never stacks several.

Properties

Property	Attribute	Type	Default	Description
heading	heading	string	''	The title, a few words in sentence case, e.g. "No assets yet".
description	description	string	''	One sentence: what is missing and what to do.
level	level	number	2	Heading level for the title. Defaults to 2.
compact	compact	boolean	false	Smaller title and no background field, for inside panels.
seed	seed	number	3	Field seed, so different empty states lie over different ground.

Slots

Slot	Description
Default	The sentence, if you need markup. Otherwise use description.
action	One mm-button, primary or secondary.

CSS parts

Part	Description
field	The mm-topography background (absent when compact).
heading	The title.
description	The sentence.
action	The action wrapper.

Examples

Every state of mm-empty-state in Storybook, with keyboard and screen reader tests.