{
"tag": "ed-empty-state",
"kind": "component",
"summary": "Empty states communicate that there is no content to display, and what the user can do next.",
"status": "experimental",
"level": "atom",
"since": "1.0",
"docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/empty-state/",
"usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/empty-state/usage/",
"playwright": "getByTestId('…')",
"dependencies": [
"ed-icon"
],
"use": [
"A first-use / \"no data yet\" area, where nothing has been created — explaining what will appear here and inviting the user to create the first item",
"A \"no results\" area after a search or filter has run — making clear a filter is active and offering a direct way to reset or clear it",
"A \"no access\" / read-only area — explaining that the user lacks permission or that the section is read-only, without offering a create action they cannot perform",
"An error area where data failed to load — stating that a technical failure occurred and offering a retry, distinct from any \"no data\" message",
"Any table, list, dashboard, or detail panel that can legitimately contain nothing"
],
"notFor": [
{
"when": "Content that is still loading",
"instead": "a [Skeleton](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/skeleton) or spinner"
},
{
"when": "A recoverable, page-critical failure that demands a decision or blocks the workflow",
"instead": "an [Alert Dialog](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/alert-dialog)"
},
{
"when": "A brief, transient confirmation or status update that should not persist on screen",
"instead": "a [Toast](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/toast-item)"
}
],
"rules": [
{
"id": "empty-state/never-blank",
"rule": "Show a dedicated empty state in every UI area that can be empty — table, list, dashboard, detail panel, search result. A blank area with no text, illustration, or explanation is never an acceptable design. This is the single most important rule for this component and overrides every other consideration."
},
{
"id": "empty-state/explain-why",
"rule": "Always explain *why* the area is empty, in plain, business-specific language — never a generic \"No entries\" / \"No data available\" message with no context or next step."
},
{
"id": "empty-state/distinct-per-situation",
"rule": "Give each situation a visually and textually distinct message so users can tell them apart — never one identical empty state for \"no data yet\", \"no results\", and \"error\", and never a failed data load that looks like a normal empty state. A failed load offers a Retry action.",
"why": "Each needs a different response from the user, and a silent failure reads as deleted or missing data."
},
{
"id": "empty-state/next-step",
"rule": "Offer the single logical next step when one genuinely helps the user move forward. Never force a call-to-action onto every empty state — omit it where the user has no action to take — and never offer a \"create\" action in an area the user has no permission to write to."
},
{
"id": "empty-state/scale",
"rule": "Match the empty state's scale to its container — a full-page welcome screen vs. a compact inline message.",
"check": "warning"
},
{
"id": "empty-state/illustration",
"rule": "Pick the illustration from the empty-state icon family, which is drawn for exactly this large, illustrative use.",
"check": "error",
"covered": true
},
{
"id": "empty-state/copy-tone",
"rule": "Write matter-of-fact, human copy that reflects the user's task, not database or system terms — never blaming the user, and never apologetic, technical, or system-error wording."
}
],
"api": {
"attributes": [
{
"name": "size",
"property": "size",
"type": "'fullscreen' | 'small' | 'medium' | 'large'",
"default": "'fullscreen'",
"description": "Defines the size of the empty state. You have to manually set the correct header (``, ``, ``, ``) and button styling."
},
{
"name": "alignment",
"property": "alignment",
"type": "'horizontal' | 'vertical'",
"default": "'vertical'",
"description": "Defines the alignment of the empty state."
},
{
"name": "icon",
"property": "icon",
"type": "string",
"default": "'error'",
"description": "Defines the icon which is used in the empty state. If you need a customized icon, use the `icon` slot instead."
},
{
"name": "dir",
"property": "dir",
"type": "string"
},
{
"name": "lang",
"property": "lang",
"type": "string"
}
],
"properties": [],
"methods": [
{
"name": "getPropertyDescriptor",
"static": true,
"parameters": [
{
"name": "name",
"type": "PropertyKey"
},
{
"name": "key",
"type": "string | symbol"
},
{
"name": "options",
"type": "PropertyDeclaration"
}
],
"returns": "PropertyDescriptor | undefined",
"description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n default. That value is its field initializer's: the constructor has finished before markup,\n a framework or any other code can set anything. Every later `null` or `undefined` means what\n a dropped prop means on a native element — the attribute is removed: with the attribute\n there, it is removed and Lit's `useDefault` restores the default without writing it; without\n one, the property is set to the default. A value set and cleared again before the element\n updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
}
],
"events": [],
"slots": [
{
"name": "",
"description": "Empty state text."
},
{
"name": "icon",
"description": "An element, such as ``, placed before the Text. Alternatively, you can use the `icon` attribute."
},
{
"name": "label",
"description": "The EmptyState's label."
},
{
"name": "button",
"description": "Optional Button."
}
],
"cssProperties": [
{
"name": "--ed-empty-state-max-width",
"default": "32rem",
"description": "The width the empty state will not grow beyond: the whole element at `size=\"small\"`, `\"medium\"` and `\"large\"`, the text column at `size=\"fullscreen\"`."
},
{
"name": "--ed-empty-state-min-height",
"default": "22rem",
"description": "The height the element reserves at `size=\"fullscreen\"`."
},
{
"name": "--ed-empty-state-icon-min-width",
"default": "10rem",
"description": "The width the `size=\"fullscreen\"` icon will not shrink below as it scales with the viewport."
}
],
"parts": [
{
"name": "base",
"description": "The component's base wrapper."
},
{
"name": "icon",
"description": "The `icon` slot itself. A slot has no box of its own, so inherited properties such as `color` and `font-size` reach the icon while `background`, `padding` and `border` do not."
},
{
"name": "label",
"description": "The container that wraps the `label` slot."
},
{
"name": "description",
"description": "Description of empty state."
},
{
"name": "button",
"description": "The `button` slot itself. Like `icon` it is a slot, so inherited properties reach the slotted button while `background`, `padding` and `border` do not."
}
],
"states": []
},
"import": "import '@eurodata/eurodata-ui/dist/components/empty-state/empty-state.js';",
"react": {
"component": "EdEmptyState",
"import": "import EdEmptyState from '@eurodata/eurodata-ui/dist/react/empty-state/index.js';"
}
}