<lm-toast> – Varseltoast / Toast

Om komponenten

Kanonisk navn

<lm-toast>

Synonymer

toast, snackbar, notification, popup-melding, banner, varsel

Kategori

tilbakemelding

ARIA-mønster

Alert

Parts

stabel, varsel, varsel-tekst, knapp, lukk-knapp, ikon, lukk-ikon

Native-first-vurdering

Komponenten er native-first ved å løfte stabelen inn i top layer via Popover API når showPopover() finnes, med eksisterende fallback når API-et mangler. HTML har fortsatt ingen ferdig toast-widget, så selve varselkortene er egen markup som følger ARIA APG sitt Alert-mønster (role="alert") for feilvarianter.

Nettleserstøtte

Bruker Popover API når showPopover() finnes, feature-detektert med fallback til position: fixed. @starting-style og color-mix() er kun visuell finpuss.

Design-tokens

var(--border-color, ...), var(--radius-small, ...), var(--shadow-elevated, ...), var(--transition-duration, ...), var(--opacity-muted, ...)

Sist endret

20. september 2026

Brukt

2 steder

Formål

Stablende, selvforsvinnende varsler for korte tilbakemeldinger etter en handling, f.eks. "Tur lagret." eller "Kunne ikke slette turen." Én instans plasseres én gang per side, og konsumenten viser varsler via en metode.

Merk: dette er, sammen med <lm-confirm-dialog>, en bevisst unntak fra designsystem/komponenter/README.md sin vanlige terskel-regel (opprett kun ved reell, eksisterende duplisering på minst to steder) - varsel-mønsteret fantes ikke i repoet i det hele tatt før denne komponenten. Bygget som et forhåndsinvestert design-system-valg. Se "Brukes av" for dagens demonstrasjons-bruksted.

Egner seg for

• Korte tilbakemeldinger etter handlinger som lagring, sletting eller midlertidig tilkoblingsstatus.
• Varsler som skal kunne forsvinne automatisk, pauses ved hover eller fokus, eller gjøres sticky med manuell lukking.

Egner seg ikke for

• Bekreftelsesdialoger eller annet som krever brukerbeslutning før resten kan fortsette; bruk <lm-confirm-dialog>.
• Varsler som må være klikkbare mens en modal <dialog> er åpen; inert-oppførselen gjør lukkeknappen utilgjengelig til dialogen lukkes.

Bruk

<script type="module" src="/designsystem/komponenter/tilbakemelding/toast/toast.js"></script>

<lm-toast id="varsler"></lm-toast>

const varsler = document.getElementById("varsler");

varsler.show("Tur lagret.", {variant: "suksess"});

// Sticky varsel (kun manuell lukking) + tidlig, programmatisk lukking:
const lukk = varsler.show("Kobler til på nytt …", {variant: "info", varighet: 0});
lukk();

varsler.addEventListener("toast:lukket", (e) => {
    console.log(e.detail.arsak); // "tidsavbrudd" | "lukket" | "fjernet"
});

Prøv selv

Rediger koden under - resultatet oppdateres live.

Events

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-toast::part(stabel) {
    /* egne stiler for "Beholderen for alle aktive varsler." */
}

lm-toast::part(varsel) {
    /* egne stiler for "Hvert enkelt toastkort." */
}

lm-toast::part(varsel-tekst) {
    /* egne stiler for "Tekstinnholdet i varselet." */
}

lm-toast::part(knapp) {
    /* egne stiler for "Generisk part for lukkeknapper." */
}

lm-toast::part(lukk-knapp) {
    /* egne stiler for "Knappen som lukker et varsel." */
}

lm-toast::part(ikon) {
    /* egne stiler for "Det variant-baserte statusikonet (info/sjekk/advarsel) foran teksten i hvert varsel." */
}

lm-toast::part(lukk-ikon) {
    /* egne stiler for "Krysset inni lukkeknappen (rendres av <lm-ikon navn="lukk-x">)." */
}

Metoder

Tilgjengelighet

Hvert varsel får role="alert" ved feil, ellers role="status" med aria-live="polite". Lukkeknappen har aria-label="Lukk varsel", og nedtellingen pauses ved hover og fokus. prefers-reduced-motion: reduce fjerner transisjoner, og forced-colors: active bruker systemfarger. Ikonet foran teksten er dekorativt (aria-hidden via <lm-ikon>) - teksten alene bærer betydningen.

• Hvert varsel får role="alert" ved variant="feil", ellers role="status" med aria-live="polite". Lukkeknappen får aria-label="Lukk varsel".
• Lukkeknappen er en vanlig fokuserbar knapp, og nedtellingen pauses både ved fokus og hover.
• Hvert varsel er sin egen live region, slik at alvorlige feil kan annonseres assertivt og vanlig status høflig.
• prefers-reduced-motion: reduce fjerner transisjoner, og forced-colors: active bruker systemfarger med Mark for feilvarianten.
• Statusikonet foran teksten (info/sjekk/advarsel) og krysset i lukkeknappen er begge dekorative <lm-ikon>-elementer; de erstatter ikke tekstlig/ARIA-betydning.

Detaljer

• Stabelen bruker Popover API med popover="manual", slik at varsler kan ligge i top layer over en modal <dialog>. Uten støtte faller komponenten tilbake til vanlig position: fixed.
• Synlighet betyr ikke interaktivitet: når en modal dialog er åpen, gjør inert-oppførselen fortsatt toastens lukkeknapp og hoverpause utilgjengelig til dialogen lukkes.
• Nedtellingen er pausbar i tråd med WCAG 2.2.1: den pauses ved hover og fokus, og hvert varsel har egen lukkeknapp.
• Alvorlighetsgrad settes per varsel, ikke per stabel.
• Nyeste varsel legges nederst i stabelen.
• Hvert varsel viser et lite, variant-basert ikon (info/sjekk/advarsel) foran teksten - samme rask-å-skumme-mønster som toast-widgets i Material Design/Polaris.

Referanser

Se også:

• ../confirm-dialog/index.html - Den naturlige kompanjongen når brukeren først må bekrefte en handling og deretter få en kort kvittering.
• ../inline-message/index.html - Dekker samme meldingsdomene når tilbakemeldingen skal ligge fast i dokumentflyten i stedet for å flyte oppå siden.
• ../../../guider/overlegg/index.html - Forklarer hvorfor toast bruker popover="manual" for å kunne vises over en allerede åpen dialog.
• ../../../guider/animasjon-og-bevegelse/index.html - Forklarer hvorfor inn-/uttoning bruker transform/opacity og den delte bevegelse-tokenen.

Brukes av:

• turer/index.html
• turer/trip.html

Avhengigheter: designsystem/komponenter/ikon/ikon/