Dialog

Kildekode på GitHub · Les som Markdown

Dialog (modal) viser innhold over resten av siden og krever at brukeren interagerer med det eller lukker det. Bygget på Radix UI Dialog med fokusfelle, Escape-lukking og bakgrunnsoverlegg.

Importering

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@kilden/designsystem";

Grunnleggende bruk

<Dialog>
<DialogTrigger asChild>
  <Button>Åpne dialog</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Er du sikker?</DialogTitle>
    <DialogDescription>
      Denne handlingen kan ikke angres. Er du sikker på at du vil fortsette?
    </DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <DialogClose asChild>
      <Button variant="outline">Avbryt</Button>
    </DialogClose>
    <DialogClose asChild>
      <Button>Bekreft</Button>
    </DialogClose>
  </DialogFooter>
</DialogContent>
</Dialog>

Med skjemainnhold

Dialog kan brukes for å vise skjemaer som krever fokus.

<Dialog>
<DialogTrigger asChild>
  <Button variant="outline">Rediger profil</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Rediger profil</DialogTitle>
    <DialogDescription>
      Gjør endringer i profilen din her. Klikk lagre når du er ferdig.
    </DialogDescription>
  </DialogHeader>
  <div style={{ display: "grid", gap: "1rem", padding: "1rem 0" }}>
    <div style={{ display: "grid", gap: "0.25rem" }}>
      <label htmlFor="name" style={{ fontSize: "0.875rem", fontWeight: 500 }}>Navn</label>
      <input
        id="name"
        defaultValue="Ola Nordmann"
        style={{
          padding: "0.5rem",
          borderRadius: "0.375rem",
          border: "1px solid var(--color-neutral-border-default)",
          background: "var(--color-neutral-background-default)",
        }}
      />
    </div>
    <div style={{ display: "grid", gap: "0.25rem" }}>
      <label htmlFor="email" style={{ fontSize: "0.875rem", fontWeight: 500 }}>E-post</label>
      <input
        id="email"
        defaultValue="ola@bekk.no"
        style={{
          padding: "0.5rem",
          borderRadius: "0.375rem",
          border: "1px solid var(--color-neutral-border-default)",
          background: "var(--color-neutral-background-default)",
        }}
      />
    </div>
  </div>
  <DialogFooter>
    <DialogClose asChild>
      <Button variant="outline">Avbryt</Button>
    </DialogClose>
    <Button>Lagre endringer</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

Bruksanbefalinger

Bruk for viktige handlinger

Dialog egner seg for bekreftelser, skjemaer og innhold som krever brukerens fulle oppmerksomhet før de fortsetter.

Ikke bruk for enkel informasjon

Unngå dialog for meldinger som ikke krever en handling. Bruk heller en toast, banner, eller inline-melding.

Bekreft sletting

Er du sikker på at du vil slette?

Inkluder alltid en tittel

Bruk DialogTitle for å gi dialogen en tydelig overskrift. Dette er viktig for tilgjengelighet.

Dialog → Dialog → Dialog

Ikke nestl dialoger

Unngå å åpne en dialog fra en annen dialog. Det skaper en forvirrende brukeropplevelse.

Tilgjengelighet

Fokus flyttes automatisk inn i dialogen når den åpnes
Fokus er fanget inni dialogen (fokusfelle)
Escape lukker dialogen
Klikk på overlegget lukker dialogen
DialogTitle kobles automatisk til aria-labelledby
DialogDescription kobles automatisk til aria-describedby
Lukkeknappen har sr-only-teksten «Lukk»

Props

Dialog (rot)

Prop	Type	Default	Beskrivelse
`open`	`boolean`	—	Kontrollert åpen/lukket
`onOpenChange`	`(open: boolean) => void`	—	Kalles når tilstanden endres
`defaultOpen`	`boolean`	`false`	Om dialogen starter åpen

DialogContent

Arver alle props fra <div>. Rendres i en portal over alt annet innhold.

DialogTitle

Arver alle props fra <h2>. Påkrevd for tilgjengelighet.

DialogDescription

Arver alle props fra <p>. Gir kontekst til skjermlesere.

DialogTrigger

Prop	Type	Default	Beskrivelse
`asChild`	`boolean`	`false`	Bruk child-elementet som trigger

DialogClose

Prop	Type	Default	Beskrivelse
`asChild`	`boolean`	`false`	Bruk child-elementet som lukkeknapp