Modal

Modal, Dialog, Dialogruta

Storybook

React Aria

Modaler lägger sig över allt annat innehåll för att fokusera användarens fokus på en sak.

Installation och användning

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { ModalTrigger, Dialog } from '@midas-ds/components'

Varianter

Använd isOpen och onOpenChange för att kontrollera om modalen är öppen eller stängd. För att stänga modal via klick utanför modalens yta, sätt isDismissable={true}.

Avancerat innehåll

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.

API

Namn	Typ	Standard	Beskrivning
isOpen	boolean	-	Whether the overlay is open by default (controlled).
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
isDismissable	boolean	-
label	string	-