Design

ConfirmDialog

@/components/ui/ConfirmDialog

Erstatter native window.confirm() med en dialog i designsystemet. Kalles via useConfirm() inne i en ConfirmProvider. Bygget på Modal + ModalActions.

Når brukes den

  • Bruk til å bekrefte en handling som er irreversibel eller kaskaderer til noe UTENFOR selve raden — f.eks. sletting av en bygning med alle tilknyttede tiltak.

  • Ikke bruk til trivielt reversible handlinger med en eksisterende motsats i API-et (merk betalt, huk av fullført) — det er Toast med en «Angre»-handling (regel/angre-etter-framfor-bekreft-for).

  • Krever ConfirmProvider montert én gang (i dashboard-layouten i appen) — komponenter kaller kun useConfirm().

  • Bekreft-knappen er `variant="error"` når `tone` er destruktiv, ellers `primary` — den teller som en egen flate selv om siden bak alt har sin egen primærknapp. Avbryt er alltid `variant="secondary"`.

Eksempler

Standard bekreftelse

tone="default" (default) for en vanlig, ikke-destruktiv bekreftelse.

const confirm = useConfirm()

async function fjernMedlem() {
  const ok = await confirm({
    title: 'Fjern medlem?',
    message: 'Medlemmet mister tilgang til sameiet med én gang.',
    confirmLabel: 'Ja, fjern',
  })
  if (ok) await utforFjerning()
}

Destruktiv bekreftelse (tone="danger")

`variant="error"` bekreft-knapp for sletting og andre irreversible/kaskaderende handlinger. "error" er den nye betegnelsen — "danger" er et alias ~30 eksisterende bruksstedene i appen fortsatt bruker.

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
title
string
'Er du sikker?'
Tittel øverst i dialogen.
message *
string
Brødteksten: hva brukeren bekrefter.
confirmLabel
string
'Ja, fortsett'
Tekst på bekreft-knappen.
cancelLabel
string
'Avbryt'
Tekst på avbryt-knappen.
tone
'default' | 'danger' | 'error'
'default'
«danger»/«error» gir en `variant="error"` bekreft-knapp, for sletting o.l. Samme ting — «danger» er aliaset.

Regler

regel/angre-etter-framfor-bekreft-forregel/en-primaerhandling-per-flate

Beslektede komponenter