Hoppa till huvudinnehåll

Modal

Modal, Dialog, Dialogruta
Storybook
React Aria

Komponent som dyker upp som ett lager ovanpå tjänsten/webbplatsen. Modalen hindrar som standard åtkomst till det underliggande lagret, så användaren måste interagera med modalen innan den kan gå vidare. Modaler används främst när det krävs ett aktivt svar från användaren.

import { DialogTrigger, Modal } from '@midas-ds/components'
<DialogTrigger>
  <Button>Öppna modal</Button>
  <Modal title='Rubrik'>Innehåll i modal</Modal>
</DialogTrigger>

Varianter​

Bekräftelsemodal​

För att undvika oönskade fel kan en modal användas för att låta användaren bekräfta ett val som kan ha negativa konsekvenser. Använd autoFocus på knappen som inte är destruktiv/negativ.

Utan stängknapp​

Vid specialfall, till exempel när vi vill säkerställa att användaren läst regler eller godkänner villkor, kan stängknappen i headern döljas.

Modaler som inte går att stänga på annat sätt än att acceptera/godkänna kan upplevas väldigt frustrerande för användarna och bör bara användas om det är nödvändigt. Komplettera alltid med en förklaring till varför det inte går att backa/avbryta.

<DialogTrigger>
  <Button>Bekräfta att du läst villkoren</Button>
  <Modal
    title='Villkor'
    hideCloseButton
    isKeyboardDismissDisabled
  >
    Du måste bekräfta att du läst villkoren innan du kan gå vidare
    <Button slot={'close'}>Bekräfta</Button>
  </Modal>
</DialogTrigger>

Användning​

Uncontrolled​

Alla varianter av <Button> samt alla övriga pressable element kan användas för att öppna modalen. För att stänga modalen med en knapp innanför modalen, använd slot={'close'}.

<DialogTrigger>
  <Button>Open</Button>
  <Modal title='Modal Title'>
    <Button slot='close'>Close</Button>
  </Modal>
</DialogTrigger>

Controlled​

Använd isOpen och onOpenChange() för att via state kontrollera om modalen är öppen eller stängd.

/* imports and rest of app */
const [open, setOpen] = React.useState<boolean>(false)

return (
  <>
    {/* trigger modal from anywhere */}
    <Button onPress={() => setOpen(true)}>Open</Button>
    <Modal
      title='Modal Title'
      isOpen={open}
      onOpenChange={setOpen}
    >
      {/* Modal content */}
    </Modal>
  </>
)

Dismissable​

För att stänga modal via klick utanför modalens yta, använd isDismissable på modalen.

<DialogTrigger>
  <Button>Open</Button>
  <Modal
    isDismissable
    title='Modal Title'
  >
    /* Modal content */
  </Modal>
</DialogTrigger>

autoFocus​

Modaler kan även innehålla mer avancerat innehåll som ett formulär. Använd då autoFocus på första element för att användarens fokus ska flyttas dit när modalen öppnas.

<DialogTrigger>
  <Button>Open</Button>
  <Modal title="Modal Title">
    <TextField label="Name" autoFocus>
  </Modal>
</DialogTrigger>

Styling​

Ange egen stil med hjälp av className, notera att din klass hamnar på overlay-komponenten.

.myModal {
  & > div {
    width: 95%;
    max-width: none;
  }
}
<DialogTrigger>
  <Button>Open</Button>
  <Modal title="Modal Title" className="myModal">
    <TextField label="Name" autoFocus>
  </Modal>
</DialogTrigger>

Riktlinjer​

Användning​

Använd modaler sparsamt och endast när det är nödvändigt då de skapar avbrott i användarens flöde.

Använd modal för:

  • Att låta användaren bekräfta att den vill utföra en handling som kan få stor påverkan och som inte kan ångras.
  • Enklare formulär

Undvik att använda modal för:

  • Varningar. Använd istället Toast eller InfoBanner
  • Situationer där användaren behöver kunna ta del av den underliggande sidans innehåll för att kunna ta ett beslut.
  • Långa formulär

Knapparnas placering och ordning​

Knapparna ska placeras i modalens nedre vänster kant. Jakande, accepterande knappar, placeras längst till vänster i knappgruppen, se riktlinjer för Knappar

API​

DialogTrigger​

NameTypeDefaultDescription
children-

The contents of the collection.

isOpen-

Whether the overlay is open by default (controlled).

defaultOpen-

Whether the overlay is open by default (uncontrolled).

NameTypeDefaultDescription
title-

An optional title for the dialog. If omitted, please provide an aria-label for accessibility.

children *-

The children of the component. A function may be provided to alter the children based on component state.

hideCloseButtonfalse

Hide close button in modal header. Use with caution!

isEntering-

Whether the modal is currently performing an entry animation.

isExiting-

Whether the modal is currently performing an exit animation.

UNSTABLE_portalContainerElementdocument.body

The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.

isDismissablefalse

Whether to close the modal when the user interacts outside it.

isKeyboardDismissDisabledfalse

Whether pressing the escape key to close the modal should be disabled.

shouldCloseOnInteractOutside(element: Element) => boolean-

When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

isOpen-

Whether the overlay is open by default (controlled).

defaultOpen-

Whether the overlay is open by default (uncontrolled).

className-

The CSS className for the element. A function may be provided to compute the class based on component state.

style-

The inline style for the element. A function may be provided to compute the style based on component state.

slotstring-

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

dirstring-
langstring-
hidden-
inert-
translate-