Leerzustand (Empty State)

Zentrierter Leerzustand (Untitled-UI-Muster): Icon-Fläche, Titel, Text, Primär- und Sekundär-Aktion — für leere Listen, Suchergebnisse, Erststarts

Im Builder nutzen

Nutzt: ui.featured-icon

Beispiele

Leere Suche mit zwei Aktionen

Keine Projekte gefunden

Deine Suche „Q3-Report" ergab keine Treffer. Versuche einen anderen Begriff oder lege ein neues Projekt an.

Suche zurücksetzenNeues Projekt

Eigenschaften

Prop	Typ	Default	Builder-Label
icon	string	"search"	Icon-Name
title *	string	—	Titel
text	string	""	Text
ctaLabel	string	""	Primär-Aktion
cta2Label	string	""	Sekundär-Aktion
spacing	string: default | none | sm | md | lg | xl	"default"	Eigenabstand

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
--empty-state-action-on-primary	var(--color-action-on-primary)
--empty-state-action-on-secondary	var(--color-action-on-secondary)
--empty-state-action-primary	var(--color-action-primary)
--empty-state-action-primary-hover	var(--color-action-primary-hover)
--empty-state-action-secondary	var(--color-action-secondary)
--empty-state-action-secondary-hover	var(--color-action-secondary-hover)
--empty-state-border-strong	var(--color-border-strong)
--empty-state-elevation-control	var(--elevation-control)
--empty-state-radius-control	var(--radius-control)
--empty-state-text-default	var(--color-text-default)
--empty-state-text-muted	var(--color-text-muted)

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-hovercolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.border.strongcolor.text.defaultcolor.text.mutedcontainer.smelevation.controlfont.family.defaultleading.baseradius.controlsize.12size.2size.4size.6size.8text.lgtext.mdtext.smweight.semibold