Modal

En modal (eller dialog) viser elementer i front, mens andre elementer skjules i backdrop.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Modalen trenger ikke state for å kunne åpnes eller lukkes. Det er viktig å inkludere tittel, så innholdet blir beskrevet for skjermlesere.

<Modal>
  <ModalTrigger asChild>
    <Button
      variant="primary"
    >
      Åpne
    </Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader closeAriaLabel="Lukk">
      <ModalTitle>
        Her er tittel
      </ModalTitle>
    </ModalHeader>
    Her er noe innhold.
  </ModalContent>
</Modal>

Du kan også lukke modalen via state, for eksempel ved en lukk- eller submit-knapp.

function ControlledModal() {
  const [open, setOpen] = React.useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    setOpen(false);
  };
  
  const handleClose = (event) => {
    event.preventDefault();
    setOpen(false);
  };

  return (
    <Modal open={open} onOpenChange={setOpen}>
      <ModalTrigger asChild>
        <Button variant="primary">Åpne</button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader closeAriaLabel="Lukk">
          <ModalTitle>
            Her er tittel
          </ModalTitle>
        </ModalHeader>
        <form onSubmit={handleSubmit}>
          <Stack gap={16} flexDirection="row" justifyContent="flex-end">
            <Button 
              variant="ghost" 
              type="button" 
              onClick={handleClose}>
              Lukk
            </Button>
            <Button variant="primary" type="submit">Åpne</button>
          </Stack>
        </form>
      </ModalContent>
    </Modal>
  );
}

Retningslinjer

Du bruker modalen om du trenger å vise noe i kontekst av den eksisterende handlingen. Innad en modal skal det ikke åpnes enda en modal. Et alternativ til modal er å heller navigere brukeren til en ny side.

Plasser knappene til høyre i modalen, med hovedknapp mest til høyre.

Kode

import { Modal } from "@aneo-org/design-react/clientComponents";

Rot-komponenten for modal.

Prop	Type	Beskrivelse
open?	`boolean`	For kontrollert tilstand. Brukes sammen med onOpenChange.
onOpenChange?	`(open: boolean) => void`	Event-handler for når open-staten endres.

<ModalTrigger />

import { ModalTrigger } from "@aneo-org/design-react/clientComponents";

Trigger for å åpne modalen.

Prop	Type	Beskrivelse
asChild?	`boolean`	Endre default element til hva enn child element er.

<ModalContent />

import { ModalContent } from "@aneo-org/design-react/clientComponents";

Innhold i modalen. Implementerer også lukkeknapp og tittel hvis du bruker title-propen.

<ModalHeader />

import { ModalHeader } from "@aneo-org/design-react/clientComponents";

Modal-header som inneholder lukke-knapp og som du må legge til tittel.

Prop	Type	Beskrivelse
closeAriaLabel	`string`	Aria label for lukke-ikonet.

<ModalTitle />

import { ModalTitle } from "@aneo-org/design-react/clientComponents";

Tilgjengelig tittel som automatisk setter aria-label for ModalContent. Implementerer Typography-komponenten med text-variant heading4.

Prop	Type	Beskrivelse
hideTitle?	`boolean`	Visuelt skjuler tittel, men tilgjengelig for screenreader.

Modal

Innhold