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, som defineres ved å sette slot="title" på den øverste headingen i drawer. Det aktiverer også den automatiske close-knappen i headeren.
Drawer fra høyre (default)
Drawer fra venstre
Drawer fra toppen
Drawer fra bunnen
Med flere knapper samlet i en Footer
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. | {} |