Skip to content
Vy logo
Components

Modal

Modal eller dialogboks er et boks som fader inn over en side og inneholder enkel informasjon.


Examples

Et eksempel på en enkel modal

() => {
 const [isOpen, setOpen] = React.useState(false);
 return (
   <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={() => setOpen(false)}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal tittel</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Textarea 
              label="Dette er et eksempel på en mellomlang venstrestilt melding i en dialogboks." 
              placeholder="Skriv inn tekst her."/>
          </ModalBody>
          <ModalFooter>
            <Button variant="tertiary" mr={3} onClick={() => setOpen(false)}>
              Lukk
            </Button>
             <Button variant="primary" mr={3} onClick={() => setOpen(false)}>
              Ok
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}