Drawer
Om komponenten
En drawer er et forankret overlay som glir inn fra en side av skjermen (topp, bunn, høyre eller venstre). Den brukes for sekundære handlinger, navigasjon eller detaljvisninger der man ikke ønsker å blokkere hele hovedinnholdet slik en modal gjør.
Drawer bygger på samme prinsipper som Modal og gjenbruker DialogTrigger og Dialog. Hvilken kant den glir inn fra styres med placement-propen (right, left, top, bottom).
Egnet til:
- Filter eller navigasjon som åpnes fra siden uten at brukeren forlater hovedflyten.
- Sekundære handlinger eller skjemafelter som ikke krever full modal-blokkering.
- Detaljvisninger som drar inn fra bunnen på mobil eller fra siden på desktop.
Uegnet til:
- Kritiske bekreftelser av destruktive eller irreversible handlinger — bruk Modal i stedet.
- Viktig innhold på siden, og som brukeren forventer å finne direkte.
Relaterte komponenter
Eksempler
Drawer skal alltid ha en tittel. Legg en Heading inne i en Header — da kobles tittelen som dialogens tilgjengelige navn. Lukkeknappen legger du til som en <Button slot="close" /> i headeren.
Drawer fra høyre (default)
Drawer fra venstre
Drawer fra toppen
Drawer fra bunnen
Med flere knapper samlet i en Footer
Header og footer kan gjøres sticky med className (f.eks. sticky top-0 / sticky bottom-0) — komponenten gjør det ikke selv. Da blir tittel, lukkeknapp og CTA værende synlige når brukeren scroller.
Sticky header og footer via className
Kontrollert via isOpen / onOpenChange
Uten lukke-mulighet — ingen close-knapp, og Escape / klikk utenfor deaktivert
Props
Drawer
| Prop | Description | Default |
|---|---|---|
children? | - | |
render? | - | |
shouldCloseOnInteractOutside? | - | |
isEntering? | - | |
isExiting? | - | |
isKeyboardDismissDisabled? | false | |
isOpen? | - | |
defaultOpen? | - | |
placement? | right | |
zIndex? | 10 | |
isDismissable? | true | |
| Events | ||
onOpenChange? | - | |
| Styles | ||
className? | 'react-aria-ModalOverlay' | |
style? | Additional style properties for the element. | {} |