Modal

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Modal</Button>
    <Modal open={open} onClose={() => setOpen(false)}>
      <Stack>
        <Text bold>Confirm Action</Text>
        <Text>Are you sure?</Text>
        <Row justifyEnd>
          <Button onClick={() => setOpen(false)}>Cancel</Button>
          <Button primary filled onClick={() => setOpen(false)}>Confirm</Button>
        </Row>
      </Stack>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Edit Profile</Button>
    <Modal open={open} onClose={() => setOpen(false)}>
      <ModalHeader>
        <Title>Edit Profile</Title>
        <ModalCloseButton />
      </ModalHeader>
      <ModalBody>
        <Stack>
          <Label>Name</Label>
          <Input placeholder="Enter your name" />
          <Label>Email</Label>
          <Input placeholder="Enter your email" />
        </Stack>
      </ModalBody>
      <ModalFooter>
        <Button sm onClick={() => setOpen(false)}>Cancel</Button>
        <Button sm primary filled onClick={() => setOpen(false)}>Save</Button>
      </ModalFooter>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Confirmation</Button>
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      title="Quick Confirmation"
      footer={
        <Row justifyEnd>
          <Button sm onClick={() => setOpen(false)}>Cancel</Button>
          <Button sm primary filled onClick={() => setOpen(false)}>Confirm</Button>
        </Row>
      }
    >
      <Text>Are you sure you want to proceed?</Text>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <>
    <Button danger filled onClick={() => setOpen(true)}>Delete Account</Button>
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      closeOnOverlayClick={false}
      title="Delete account?"
      footer={
        <Row justifyEnd>
          <Button sm onClick={() => setOpen(false)}>Cancel</Button>
          <Button sm danger filled onClick={() => setOpen(false)}>Delete</Button>
        </Row>
      }
    >
      <Text>This action is permanent and cannot be undone.</Text>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);
const nameRef = useRef(null);

return (
  <>
    <Button onClick={() => setOpen(true)}>Edit Profile</Button>
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      initialFocus={nameRef}
      title="Edit Profile"
      footer={
        <Row justifyEnd>
          <Button sm onClick={() => setOpen(false)}>Cancel</Button>
          <Button sm primary filled onClick={() => setOpen(false)}>Save</Button>
        </Row>
      }
    >
      <Stack>
        <Label>Name</Label>
        <Input ref={nameRef} placeholder="Enter your name" />
        <Label>Email</Label>
        <Input type="email" placeholder="you@example.com" />
        <Checkbox>Send me email updates</Checkbox>
      </Stack>
    </Modal>
  </>
);

const [openSm, setOpenSm] = useState(false);
const [openLg, setOpenLg] = useState(false);

return (
  <>
    <Row>
      <Button onClick={() => setOpenSm(true)}>Small modal</Button>
      <Button onClick={() => setOpenLg(true)}>Large modal</Button>
    </Row>
    <Modal open={openSm} onClose={() => setOpenSm(false)} sm>Small modal</Modal>
    <Modal open={openLg} onClose={() => setOpenLg(false)} lg>Large modal</Modal>
  </>
);

const [openPrimary, setOpenPrimary] = useState(false);
const [openDanger, setOpenDanger] = useState(false);

return (
  <>
    <Row>
      <Button primary filled onClick={() => setOpenPrimary(true)}>Primary modal</Button>
      <Button danger filled onClick={() => setOpenDanger(true)}>Danger modal</Button>
    </Row>
    <Modal open={openPrimary} onClose={() => setOpenPrimary(false)} primary filled>Primary modal</Modal>
    <Modal open={openDanger} onClose={() => setOpenDanger(false)} danger filled>Danger modal</Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Modal</Button>
    <Modal open={open} onClose={() => setOpen(false)} overlayProps={{ blur: true }}>
      <Text>Blurred background</Text>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Modal</Button>
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      closeOnOverlayClick={false}
      closeOnEscape={false}
    >
      <Text>Must click a button to close</Text>
      <Button onClick={() => setOpen(false)}>Close</Button>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Open Full Screen</Button>
    <Modal open={open} onClose={() => setOpen(false)} fullScreen>
      <ModalHeader>
        <Title>Full Screen View</Title>
        <ModalCloseButton />
      </ModalHeader>
      <ModalBody>
        <Text>Content fills the entire viewport.</Text>
      </ModalBody>
    </Modal>
  </>
);

const [open, setOpen] = useState(false);

return (
  <ThemeProvider themeDefaults={{
    modal: { content: { lg: true, border: true } },
  }}>
    <Button onClick={() => setOpen(true)}>Open Modal</Button>
    <Modal open={open} onClose={() => setOpen(false)}>Content</Modal>
  </ThemeProvider>
);