Modal

@/components/ui/Modal

Dialogflaten for alt du GJØR — skjema, valg, lagring, sletting. Fast bredde (480/640px) og sentrert fra 640px (sm); på mobil er modalen et bunnark i bunnen av skjermen.

Når brukes den

Enhver handling — skjema, valg, bekreftelse, sletting (regel/modal-gjore-accordion-lese: Modal/Popover for det man GJØR).
På mobil (under 640px) er modalen et bunnark — full bredde, avrundet kun øverst, i tommelens rekkevidde nederst på skjermen. Fra 640px er den et sentrert kort. Dette er automatisk, ikke noe kallstedet styrer.
Bruk `ModalBody` + `ModalActions` sammen for nytt innhold — de bringer egen padding/handlingsrad. Bland dem ALDRI med rå children i samme modal.
Sett `ariaLabel` når modalen ikke har en synlig `title` (f.eks. et eget visuelt hode med logo).
`size="wide"` (640px) for skjema med to kolonner e.l. — standard er 480px.
`sticky` på `ModalActions` når innholdet kan bli langt nok til å rulle, slik at handlingsraden alltid er synlig.
Escape og klikk-utenfor lukker alltid — dette er en bevisst, gjennomgående kontrakt, ikke noe hvert kallsted skal styre selv.
Ikke bruk Modal til å vise mer om en rad du allerede ser uten å gjøre noe — det er CollapsibleSection sin jobb.

Eksempler

Med tittel og undertekst

Standard bruk: headerrad med tittel (heading-20) og valgfri undertekst, ModalBody + ModalActions under.

<Modal open={open} onClose={close} title="Eksempelmodal" subtitle="…">
  <ModalBody>…</ModalBody>
  <ModalActions>
    <Button variant="secondary" onClick={close}>Avbryt</Button>
    <Button variant="primary" onClick={lagre}>Bekreft</Button>
  </ModalActions>
</Modal>

Uten tittel (gamle, rå children)

Når flaten har sitt eget visuelle hode (logo, sentrert overskrift). Uten ModalBody/ModalActions beholder Modal sin gamle innholds-padding, uendret fra før denne runden.

<Modal open={open} onClose={close} ariaLabel="Eksempel uten tittel">
  …
</Modal>

size="wide"

640px i stedet for standard 480px — for bredere skjema.

<Modal open={open} onClose={close} title="…" size="wide">…</Modal>

ModalActions sticky

Handlingsraden blir stående nederst mens ModalBody-innholdet ruller — for lange skjema.

<ModalActions sticky>
  <Button variant="secondary" onClick={close}>Avbryt</Button>
  <Button variant="primary" onClick={lagre}>Lagre</Button>
</ModalActions>

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

open *

boolean

—

Styrer synlighet.

onClose *

() => void

—

Kalles ved Escape, klikk utenfor og egne lukkeknapper.

title

string

—

Vises i en headerrad (heading-20) sammen med lukkeknappen. Utelatt: ingen headerrad.

subtitle

string

—

Undertekst (copy-14, sekundær) rett under tittelen. Kun sammen med `title`.

ariaLabel

string

—

Tilgjengelig navn når `title` mangler. Med `title` satt trenger du aldri denne.

size

'default' | 'wide'

'default'

'default' er 480px, 'wide' er 640px.

children *

React.ReactNode

—

Modalens innhold — enten rå (gammel oppførsel) eller `ModalBody`/`ModalActions`.

className

string

—

Legges på selve dialog-boksen (f.eks. for en egen maks-bredde).

ModalBody

{ children, className?, style? }

—

Egen eksport. Innholdsslot med padding var(--space-6).

ModalActions

{ children, className?, sticky?, style? }

—

Egen eksport. Handlingsrad med toppkant, høyrestilt, gap var(--space-2). `sticky` holder den synlig mens ModalBody ruller.

Regler

regel/modal-gjore-accordion-lese

Beslektede komponenter