EmptyState
@/components/ui/EmptyState
Felles tomtilstand: stiplet kort med nøytral ikonsirkel, tittel, kort forklaring og valgfri handling.
Når brukes den
Bruk for enhver liste/register som er tomt — den peker ALLTID på det FØRSTE STEGET brukeren kan ta, aldri bare på at noe er tomt.
action er knappen/lenken til nettopp den handlingen (Button secondary sm eller primary sm), ikke en generisk «Kom i gang».
Ikonet er nøytralt (text-secondary) — ikke aksentfarget. Fargen skal ligge i handlingen, ikke i illustrasjonen.
Gjelder også en midlertidig eller feilrelatert tom tilstand («Ingen tilkoblet bank ennå») — den peker fortsatt på handlingen («Koble til bank»).
Eksempler
Med handling
Standardformen — tittel, kort forklaring og en knapp til det første steget.
Ingen bygg ennå
Legg til det første bygget for å lage en vedlikeholdsplan.
<EmptyState icon={Eiendom} title="Ingen bygg ennå" action={<Button variant="primary" size="sm">Legg til bygg</Button>}>
Legg til det første bygget for å lage en vedlikeholdsplan.
</EmptyState>Uten handling
Når neste steg skjer et annet sted på siden (f.eks. et filter over lista) i stedet for i selve tomtilstanden.
Ingen treff på filteret
Prøv et bredere filter, eller nullstill søket over.
Props
Sveip tabellen for å se hele innholdet