Dialog

Import

import { Dialog, DialogTitle, DialogDescription, DialogClose, DialogTrigger, DialogContent, Button, Flex } from "@sparrowengg/twigs-react";

Usage

Result

Loading...

Live EditorOpen in playground

<Dialog>
  <DialogTrigger asChild>
    <Button size="lg">Edit profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogTitle>Edit profile</DialogTitle>
    <DialogDescription css={{ color: "$neutral600", fontSize: "$sm" }}>
      Make changes to your profile here. Click save when done.
    </DialogDescription>
    <Flex>
      <DialogClose asChild>
        <Button color="default">Close</Button>
      </DialogClose>
    </Flex>
  </DialogContent>
</Dialog>

Props

Dialog

Property	Description	Type	Default
defaultOpen	uncontrolled open state	boolean	false
open	controller open state	boolean
onOpenChange	callback function for state changes
size	size of the dialog	sm md lg xl full	md
scrollBehavior	control scroll behavior	auto scroll hidden	auto
overlayClassName	classname for dialog overlay	string