<lm-confirm-dialog> – Bekreftelsesdialog / Confirmation dialog

Om komponenten

Kanonisk navn

<lm-confirm-dialog>

Synonymer

bekreftelsesdialog, slettedialog, confirm dialog, destructive action dialog, are you sure

Kategori

tilbakemelding, dialog

ARIA-mønster

Alert Dialog - bekrefter en destruktiv eller uigjenkallelig handling og krever umiddelbart svar, i motsetning til Dialog (Modal).

Parts

dialog, tittel, innhold, knapperad, knapp, knapp-avbryt, knapp-bekreft

Native-first-vurdering

Komponenten bruker native <dialog> med showModal() og innebygd backdrop. Den beholder en egen --apne-kommando fordi ekstern commandfor ikke kan peke direkte inn på dialogen i shadow DOM.

Nettleserstøtte

Bruker native <dialog>, showModal(), closedby="any" og Invoker Commands API (command, commandfor, egendefinert "--apne"). Det finnes ingen feature-detection eller fallback; i nettlesere uten disse API-ene vil deklarativ åpning/lukking ikke fungere.

Design-tokens

var(--border-color, ...), var(--radius-large, ...), var(--shadow-elevated, ...), var(--scrim-color, ...), var(--radius-small, ...), var(--transition-duration, ...), var(--background-color-hover, ...)

Sist endret

20. september 2026

Brukt

1 sted

Formål

Standardisert "er du sikker?"-dialog for destruktive eller uigjenkallelige handlinger. Gir et fast oppsett for tittel, innhold og avbryt/bekreft-knapper.

Merk: dette er, sammen med <lm-toast>, en bevisst unntak fra designsystem/komponenter/README.md sin vanlige terskel-regel (opprett kun ved reell, eksisterende duplisering på minst to steder) - komponenten er bygget som et forhåndsinvestert design-system-valg, ikke fordi mønsteret allerede var duplisert flere steder i repoet. Se "Brukes av" for dagens (foreløpig eneste) bruksted.

Egner seg for

• Bekreftelse av destruktive eller uigjenkallelige handlinger som sletting, arkivering eller overskriving.
• Enkle ja/nei-dialoger der domenelogikken kan trigges via ett bekreft-event.

Egner seg ikke for

• Dialoger med skjema, flere handlingsvalg eller spesiallayout i knapperaden; komponenten har fast avbryt/bekreft-oppsett.
• Situasjoner der åpningen må skje med vanlig command="show-modal" direkte mot komponenten; utenfra støttes den egendefinerte "--apne"-kommandoen eller showModal().

Bruk

<script type="module" src="/designsystem/komponenter/tilbakemelding/confirm-dialog/confirm-dialog.js"></script>

<button type="button" command="--apne" commandfor="slett-tur-dialog">Slett tur</button>

<lm-confirm-dialog
    id="slett-tur-dialog"
    tittel="Slett tur"
    bekreft-tekst="Slett for godt"
    variant="fare"
>
    <p>
        Er du sikker på at du vil slette denne turen? Stopp, fly, hotell og
        kvitteringer som hører til turen slettes samtidig, og dette kan
        ikke angres.
    </p>
</lm-confirm-dialog>

document.getElementById("slett-tur-dialog").addEventListener("bekreft", async () => {
    await db.deleteTrip(trip.id);
    window.location.href = "index.html";
});

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Slots

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-confirm-dialog::part(dialog) {
    /* egne stiler for "Selve <dialog>-elementet." */
}

lm-confirm-dialog::part(tittel) {
    /* egne stiler for "Dialogtittelen." */
}

lm-confirm-dialog::part(innhold) {
    /* egne stiler for "Slot-innholdet i dialogen." */
}

lm-confirm-dialog::part(knapperad) {
    /* egne stiler for "Wrapper for handlingsknappene." */
}

lm-confirm-dialog::part(knapp) {
    /* egne stiler for "Generisk part for begge handlingsknappene." */
}

lm-confirm-dialog::part(knapp-avbryt) {
    /* egne stiler for "Avbrytknappen." */
}

lm-confirm-dialog::part(knapp-bekreft) {
    /* egne stiler for "Bekreftknappen." */
}

Metoder

Tilgjengelighet

Komponenten bruker en ekte <dialog role="alertdialog" closedby="any">. Fokus lander først på avbryt-knappen, i tråd med APG-anbefalingen om minst destruktive standardvalg. Tittelen og innholdet kobles eksplisitt til dialogen med aria-labelledby og aria-describedby. forced-colors: active bytter til systemfarger.

• Komponenten bruker en ekte <dialog role="alertdialog" closedby="any"> med intern command="close" på avbryt-knappen.
• Tastaturstøtten følger nettleserens dialogimplementasjon: vanlige knapper kan aktiveres med tastatur, og Escape lukker dialogen.
• Tittelen og det slottede innholdet kobles eksplisitt til dialogen med aria-labelledby og aria-describedby.
• forced-colors: active bytter dialog og knapper til systemfarger. Komponenten animerer ikke.

Detaljer

• Komponenten wrapper en ekte <dialog> i shadow DOM og lukkes med Escape, bakgrunnsklikk eller avbryt-knappen.
• Åpning utenfra bruker en egendefinert kommando via Invoker Commands API: command="--apne" treffer vertselementet, og komponenten videresender åpningen til den interne dialogen.
• Avbryt-knappen er en vanlig intern command="close" commandfor="dialog".
• forced-colors: active bruker systemfarger i samme mønster som resten av reposen.

Referanser

Se også:

• ../toast/index.html - Passer naturlig sammen når en destruktiv handling først bekreftes her og deretter kvitteres med et kort varsel.
• ../../handling/button-group/index.html - Løser den enklere, ikke-modale varianten av samme type handlingsrad med relaterte knapper.
• ../../../funksjoner/dom/dialog/index.html - Denne komponenten er et UI-lag oppå samme native <dialog>-mekanisme som funksjonen kobler til vanlig HTML.
• ../../../guider/overlegg/index.html - Full oversikt over når en modal <dialog> passer, og hvorfor toast/menyer i stedet bruker popover.

Brukes av:

• turer/trip.html - Slett tur-bekreftelsen.

Avhengigheter: Ingen