<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

Attributt	Type	Standard	Beskrivelse
`tittel`	`string`	""	Overskriften (<h2>) i dialogen.
`bekreft-tekst`	`string`	"Bekreft"	Teksten på bekreft-knappen.
`avbryt-tekst`	`string`	"Avbryt"	Teksten på avbryt-knappen.
`variant`	`"fare"`		fare gir bekreft-knappen en rød tone for en destruktiv handling. Uten variant er begge knappene nøytrale.

Events

Event	Type	Beskrivelse
`bekreft`	`CustomEvent`	Brukeren klikket bekreft-knappen. Dialogen lukkes automatisk rett før eventet dispatches - selve den destruktive handlingen eies av konsumenten.

Slots

Slot	Beskrivelse
(standard)	Selve spørsmålsteksten/forklaringen (fri markup, typisk én <p>).

Parts

Part	Beskrivelse
`dialog`	Selve <dialog>-elementet.
`tittel`	Dialogtittelen.
`innhold`	Slot-innholdet i dialogen.
`knapperad`	Wrapper for handlingsknappene.
`knapp`	Generisk part for begge handlingsknappene.
`knapp-avbryt`	Avbrytknappen.
`knapp-bekreft`	Bekreftknappen.

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

Metode	Parametre	Returverdi	Beskrivelse
`showModal()`	-		Åpner dialogen programmatisk - samme effekt som en ekte command="--apne"-knapp utenfra.
`close()`	-		Lukker dialogen programmatisk, uten å dispatche bekreft.

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