Skeleton

Kildekode på GitHub · Les som Markdown

Skeleton viser formen av innhold som ennå ikke er lastet. Den gir en bedre brukeropplevelse enn en tom side ved å indikere hva som kommer.

Importering

import { Skeleton } from "@kilden/designsystem";

Grunnleggende bruk

<div style={{ display: "grid", gap: "0.5rem", maxWidth: "24rem" }}>
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
</div>

Profil-plassholder

<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<Skeleton className="h-12 w-12 rounded-full" />
<div style={{ display: "grid", gap: "0.5rem" }}>
  <Skeleton className="h-4 w-[180px]" />
  <Skeleton className="h-4 w-[120px]" />
</div>
</div>

Kort-plassholder

<Card style={{ maxWidth: "24rem" }}>
<CardHeader>
  <Skeleton className="h-5 w-2/3" />
  <Skeleton className="h-4 w-full" />
</CardHeader>
<CardContent>
  <div style={{ display: "grid", gap: "0.5rem" }}>
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-3/4" />
  </div>
</CardContent>
</Card>

Liste-plassholder

<div style={{ display: "grid", gap: "1rem", maxWidth: "24rem" }}>
{[1, 2, 3].map((i) => (
  <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
    <Skeleton className="h-10 w-10 rounded-md" />
    <div style={{ display: "grid", gap: "0.25rem", flex: 1 }}>
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-3 w-1/2" />
    </div>
  </div>
))}
</div>

Bruksanbefalinger

Match formen av innholdet

Skeletons bør ligne innholdet de erstatter — bruk riktig størrelse, avrunding og layout.

Skeleton for umiddelbart innhold → unødvendig flimmer

Ikke bruk for rask lasting

Hvis innholdet lastes på under 200ms, viser skeleton bare et flimmer. Bruk den kun for merkbar ventetid.

Tilgjengelighet

Skeleton er dekorativ og trenger ingen spesiell ARIA-markering
For skjermlesere, sørg for at lasting-tilstanden kommuniseres via aria-busy="true" på containeren
Bruk aria-live="polite" på området som oppdateres når innholdet er ferdig lastet

Props

Arver alle props fra <div>. Viktige utility-klasser:

Klasse	Beskrivelse
`h-4`	Høyde (tekst-linje)
`w-[250px]`	Fast bredde
`w-3/4`	Relativ bredde
`rounded-full`	Sirkulær form (avatar)
`rounded-md`	Avrundede hjørner (standard)