Dialog

import { Dialog } from '@krakentech/coral/atoms';
 
<Button onClick={() => setOpen(true)}>Open dialog</Button>
 
<Dialog
    ariaLabelledBy="dialog-title"
    open={open}
    onClose={() => setOpen(false)}
>
    <Stack flexDirection="column" gap="smMd">
        <Typography textStyle="h3" id="dialog-title">
            Dialog title
        </Typography>
        <Typography>
            Dialog content Cupidatat duis officia laborum pariatur
            officia pariatur cupidatat proident id qui anim. Tempor
            dolore in non mollit incididunt quis eu. Dolor nulla
            cupidatat ea nisi commodo ut fugiat velit commodo est.
            Amet officia tempor magna eu reprehenderit dolore est
            laboris in ipsum ipsum nisi enim.
        </Typography>
        <Stack gap="smMd">
            <Button
                variant="outlined"
                onClick={() => setOpen(false)}
            >
                Close
            </Button>
            <Button onClick={() => setOpen(false)}>Action</Button>
        </Stack>
    </Stack>
</Dialog>

const [open, setOpen] = useState(false);
 
<Button onClick={setOpen(true)}>Open dialog</Button>
 
<Dialog
    ariaLabelledBy="title"
    onClose={() => setOpen(false)}
    open={open}
    disableEscapeKeyDown
>
    <Typography id="title">Dialog title ...</Typography>
</Dialog>

const [open, setOpen] = useState(false);
 
<Button onClick={setOpen(true)}>Open dialog</Button>
 
<Dialog
    ariaLabelledBy="title"
    onClose={() => setOpen(false)}
    open={open}
    dialogWidth="md"
>
    <Typography id="title">Dialog title ...</Typography>
</Dialog>

<Dialog
    ariaLabelledBy="title"
    onClose={() => {}}
>
    ...
</Dialog>

const [open, setOpen] = useState(false);
 
<Button onClick={setOpen(true)}>Open dialog</Button>
 
<Dialog
    ariaLabelledBy="title"
    onClose={() => setOpen(false)}
    open={open}
    dialogWidth={{ base: "xs", lg: "md" }}
>
    <Typography id="title">Dialog title ...</Typography>
</Dialog>