Modal

1import { Button, IconInfo, Modal, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalBasic() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        title="Title of modal"
18        description="Description of modal"
19        visible={visible}
20        onCancel={toggle}
21        onConfirm={toggle}
22      >
23        <Typography.Text>This is the content of the Modal</Typography.Text>
24      </Modal>
25    </>
26  );
27}
28

1import { Button, IconAlertCircle, Modal, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalBasic() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        title="Modal using an icon"
18        description="Description of modal"
19        visible={visible}
20        onCancel={toggle}
21        onConfirm={toggle}
22        icon={<IconAlertCircle background="brand" size="xlarge" />}
23      >
24        <Typography.Text>This is the content of the Modal</Typography.Text>
25      </Modal>
26    </>
27  );
28}
29

1import { Button, IconAlertCircle, Modal } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalBasic() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        size="small"
18        layout="vertical"
19        title="Modal with vertical layout"
20        description="Description of modal"
21        visible={visible}
22        onCancel={toggle}
23        onConfirm={toggle}
24        icon={<IconAlertCircle background="brand" size="xlarge" />}
25      />
26    </>
27  );
28}
29

1import { Button, Modal, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalCloseButton() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        closable
18        title="This modal has a close button"
19        description="Description of modal"
20        visible={visible}
21        onCancel={toggle}
22        onConfirm={toggle}
23      >
24        <Typography.Text>This is the content of the Modal</Typography.Text>
25      </Modal>
26    </>
27  );
28}
29

1import { Button, Modal, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalFooterBackground() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        title="This modal has a close button"
18        description="Description of modal"
19        visible={visible}
20        onCancel={toggle}
21        onConfirm={toggle}
22        footerBackground
23      >
24        <Typography.Text>This is the content of the Modal</Typography.Text>
25      </Modal>
26    </>
27  );
28}
29

1import { Button, Modal, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalFooterRightAligned() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        title="This modal has a close button"
18        description="Description of modal"
19        visible={visible}
20        onCancel={toggle}
21        onConfirm={toggle}
22        alignFooter="right"
23      >
24        <Typography.Text>This is the content of the Modal</Typography.Text>
25      </Modal>
26    </>
27  );
28}
29

1import { Button, Modal, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function ModalFooterHide() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10
11  return (
12    <>
13      <Button onClick={toggle} type="default">
14        Open modal
15      </Button>
16      <Modal
17        title="This modal has a close button"
18        description="Description of modal"
19        visible={visible}
20        onCancel={toggle}
21        onConfirm={toggle}
22        hideFooter
23      >
24        <Typography.Text>This is the content of the Modal</Typography.Text>
25      </Modal>
26    </>
27  );
28}
29

1import {
2  Badge,
3  Button,
4  IconTrash,
5  SidePanel,
6  Space,
7  Typography,
8} from "@supabase/ui";
9import { useState } from "react";
10
11export default function SidePanelFooterCustom() {
12  const [visible, setVisible] = useState(false);
13
14  function toggle() {
15    setVisible(!visible);
16  }
17  return (
18    <>
19      <Button type="default" onClick={toggle}>
20        Open sidepanel
21      </Button>
22      <SidePanel
23        visible={visible}
24        title="Title of the sidepanel"
25        onCancel={toggle}
26        customFooter={[
27          <Space>
28            <Button type="outline">Cancel</Button>
29            <Button danger icon={<IconTrash />}>
30              Delete
31            </Button>
32            <Badge color="red">Excercise caution</Badge>
33          </Space>,
34        ]}
35      >
36        <Typography.Text>This is the content of the sidepanel</Typography.Text>
37      </SidePanel>
38    </>
39  );
40}
41

1import {
2  Badge,
3  Button,
4  IconTrash,
5  Modal,
6  Space,
7  Typography,
8} from "@supabase/ui";
9import { useState } from "react";
10
11export default function ModalFooterCustomVertical() {
12  const [visible, setVisible] = useState(false);
13
14  function toggle() {
15    setVisible(!visible);
16  }
17
18  return (
19    <>
20      <Button onClick={toggle} type="default">
21        Open modal
22      </Button>
23      <Modal
24        size="small"
25        layout="vertical"
26        title="Custom footer with vertical layout"
27        description="Description of modal"
28        visible={visible}
29        onCancel={toggle}
30        onConfirm={toggle}
31        customFooter={[
32          <Space style={{ width: "100%" }}>
33            <Button size="medium" block type="secondary">
34              Cancel
35            </Button>
36            <Button size="medium" block danger icon={<IconTrash />}>
37              Delete
38            </Button>
39          </Space>,
40        ]}
41      >
42        <Typography.Text type="secondary">
43          Modal content is inserted here, if you need to insert anything into
44          the Modal you can do so via
45        </Typography.Text>
46      </Modal>
47    </>
48  );
49}
50

1import {
2  Badge,
3  Button,
4  IconCheck,
5  IconTrash,
6  Modal,
7  Space,
8  Typography,
9} from "@supabase/ui";
10import { useState } from "react";
11
12export default function ModalFooterCustomVerticalOneButton() {
13  const [visible, setVisible] = useState(false);
14
15  function toggle() {
16    setVisible(!visible);
17  }
18
19  return (
20    <>
21      <Button onClick={toggle} type="default">
22        Open modal
23      </Button>
24      <Modal
25        size="small"
26        title="This modal is to confirm something"
27        description="Description of modal"
28        icon={<IconCheck background="brand" size="xxxlarge" />}
29        visible={visible}
30        onCancel={toggle}
31        onConfirm={toggle}
32        layout="vertical"
33        customFooter={[
34          <Space style={{ width: "100%" }}>
35            <Button size="medium" block icon={<IconCheck />}>
36              Confirm
37            </Button>
38          </Space>,
39        ]}
40      />
41    </>
42  );
43}
44