Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

Skeleton

Skeleton gir brukeren en midlertidig visuell tilbakemelding mens innholdet lastes eller behandles. Den er en stilisert versjon av det faktiske innholdet som skal vises.

StabilOppdatert 17. oktober 2025
Github FigmaEndringslogg

Egnet til:

  • Redusere oppfattet lastetid.
  • Minimere layout-shift.

Uegnet til:

  • Tilfeller med lengre lastetider uten ytterligere informasjon.

Eksempler

Retningslinjer

Skeleton brukes for å kommunisere til brukerne at innholdet lastes. Fordelen med Skeleton sammenliknet med Loader er at du kan forme Skeleton-elementene som det faktiske innholdet. Brukeren får et hint om hva som kommer, og du reduserer CLS (Cumulative Layout Shift).

Antall elementer

Hvis brukeren ser mer innhold representert med skeleton enn det som faktisk lastes inn, kan det oppleves som feil eller forvirrende. Hvis brukeren kan ende opp med tomt innhold, er det bedre å bruke en Loader.

Ventetid

Bruk av skeleton bidrar til at ventetiden ved lasting oppleves kortere, men det tar ikke lang tid før brukeren blir utålmodig eller forvirret over at ingenting skjer. Når du bruker Skeleton må ventetiden derfor ikke overstige 9 sekunder. Om ventetiden er lenger må brukeren se en forklaring, eventuelt med en fremdriftsindikator.

Lenker

Tilgjengelighet

Komponenten setter både visiblity: none, aria-hidden og pointer-events: none på elementet. Skjermlesere vil derfor ikke vite at noe lastes. Vurder om det er nødvendig å legge til aria-live-regioner med informasjon til skjermlesere. En alternativ løsning kan være å legge seksjonen med Skeleton i en section med aria-label.

Ved lengre lastetider, eller hvis noe har gått galt, bør brukeren gjøres oppmerksom på dette.

Props

Skeleton

variant?

  • Type:
    "circle" | "rectangle" | "rounded" | "text"
  • Default:
    "text"

height?

  • Type:
    string | number
  • Description:

    When not inferring height from children, you must specify height

width?

  • Type:
    string | number
  • Description:

    When not inferring width from children, you must specify width

as?

  • Type:
    "div" | "span"
  • Default:
    ""div""
  • Description:

    Overrides html-tag

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Opacity er brukt som teknikk for 'pulse'-animasjonen, derfor kan bare bakgrunnsfarge endres på.

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.

TokenFallback
--ac-skeleton-bg--a-surface-neutral-moderate