Site settings
Change the appearance of the site to suit your preferences
Dialog
A modal or dialog box is a box that fades in over a page and contains simple information.
Example of a simple dialog.
() => { return ( <DialogRoot size="md"> <DialogTrigger asChild> <Button size="md"> Open (medium size) </Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> </DialogHeader> <DialogBody> <Textarea label="Dette er et eksempel på en mellomlang venstrestilt." placeholder="Skriv inn tekst her."/> </DialogBody> <DialogFooter> <DialogActionTrigger asChild> <Button variant="tertiary">Lukk</Button> </DialogActionTrigger> <DialogActionTrigger asChild> <Button variant="primary">Ok</Button> </DialogActionTrigger> </DialogFooter> </DialogContent> </DialogRoot> ) }
A large version vertical centered
() => { return ( <DialogRoot size="lg" placement="center" motionPreset="slide-in-bottom"> <DialogTrigger asChild> <Button size="md"> Open (large one, centered) </Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> </DialogHeader> <DialogBody> <p>This is an example of text</p> </DialogBody> <DialogFooter> <DialogActionTrigger asChild> <Button variant="tertiary">Lukk</Button> </DialogActionTrigger> <DialogActionTrigger asChild> <Button variant="primary">Ok</Button> </DialogActionTrigger> </DialogFooter> </DialogContent> </DialogRoot> ) }
A responsive dialog. Use size "cover" for fullscreen dialogs
() => { return ( <DialogRoot size={{smDown: "cover", sm: "sm"}} placement="center" motionPreset="slide-in-bottom"> <DialogTrigger asChild> <Button size="md"> Open responsive dialog </Button> </DialogTrigger> <DialogContent> <DialogCloseTrigger /> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> </DialogHeader> <DialogBody> <p>I am full size on smaller screens</p> </DialogBody> <DialogFooter> <DialogActionTrigger asChild> <Button variant="tertiary">Lukk</Button> </DialogActionTrigger> <DialogActionTrigger asChild> <Button variant="primary">Ok</Button> </DialogActionTrigger> </DialogFooter> </DialogContent> </DialogRoot> ) }