Modal

Modals provide important prompts in a user flow.

1
import {
2
  Modal,
3
  ModalHeader,
4
  ModalHeading,
5
  ModalDescription,
6
  trapFocus,
7
  useModal
8
} from '@cerberus/react'

Usage

Basic Usage

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { hstack } from 'styled-system/patterns'
13

14
function OverviewPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button onClick={show}>Open Modal</Button>
21

22
      <Portal>
23
        <Modal onKeyDown={handleKeyDown} ref={modalRef}>
24
          <ModalHeader>
25
            <ModalHeading>This is a custom modal</ModalHeading>
26
          </ModalHeader>
27
          <ModalDescription>
28
            This is a custom modal that is can be whatever you need.
29
          </ModalDescription>
30

31
          <div
32
            className={hstack({
33
              color: 'info.text.100',
34
              mb: '10',
35
            })}
36
          >
37
            <Model size="5rem" />
38
            <Model size="5rem" />
39
            <Model size="5rem" />
40
          </div>
41

42
          <Button usage="outlined" onClick={close}>
43
            Close
44
          </Button>
45
        </Modal>
46
      </Portal>
47
    </div>
48
  )
49
}

Customization

You can customize each Modal component like you would any other component.

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { css } from 'styled-system/css'
13

14
function CustomPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button
21
        className={css({
22
          bgColor: 'black',
23
          color: 'yellow',
24
          _hover: {
25
            bgColor: 'yellow',
26
            color: 'black',
27
          },
28
        })}
29
        onClick={show}
30
      >
31
        Enter the Wu
32
      </Button>
33

34
      <Portal>
35
        <Modal
36
          className={css({
37
            bgColor: 'black',
38
          })}
39
          onKeyDown={handleKeyDown}
40
          ref={modalRef}
41
        >
42
          <ModalHeader>
43
            <ModalHeading
44
              className={css({
45
                color: 'yellow !important',
46
              })}
47
            >
48
              Inspectah Deck
49
            </ModalHeading>
50
            <ModalDescription>
51
              Swingin' through your town like your neighborhood Spider-man!
52
            </ModalDescription>
53
          </ModalHeader>
54

55
          <Button
56
            className={css({
57
              borderColor: 'yellow',
58
              color: 'yellow',
59
              _hover: {
60
                borderColor: 'yellow',
61
                color: 'yellow',
62
              },
63
            })}
64
            usage="outlined"
65
            onClick={close}
66
          >
67
            Close
68
          </Button>
69
        </Modal>
70
      </Portal>
71
    </div>
72
  )
73
}

API

define function Modal(props: HTMLAttributes<HTMLDialogElement>): ReactNode

define function ModalHeader(props: HTMLAttributes<HTMLDivElement>): ReactNode

define function ModalHeading(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

define function ModalDescription(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

1
import {
2
  Modal,
3
  ModalHeader,
4
  ModalHeading,
5
  ModalDescription,
6
  trapFocus,
7
  useModal
8
} from '@cerberus/react'

Usage

Basic Usage

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { hstack } from 'styled-system/patterns'
13

14
function OverviewPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button onClick={show}>Open Modal</Button>
21

22
      <Portal>
23
        <Modal onKeyDown={handleKeyDown} ref={modalRef}>
24
          <ModalHeader>
25
            <ModalHeading>This is a custom modal</ModalHeading>
26
          </ModalHeader>
27
          <ModalDescription>
28
            This is a custom modal that is can be whatever you need.
29
          </ModalDescription>
30

31
          <div
32
            className={hstack({
33
              color: 'info.text.100',
34
              mb: '10',
35
            })}
36
          >
37
            <Model size="5rem" />
38
            <Model size="5rem" />
39
            <Model size="5rem" />
40
          </div>
41

42
          <Button usage="outlined" onClick={close}>
43
            Close
44
          </Button>
45
        </Modal>
46
      </Portal>
47
    </div>
48
  )
49
}

Customization

You can customize each Modal component like you would any other component.

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { css } from 'styled-system/css'
13

14
function CustomPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button
21
        className={css({
22
          bgColor: 'black',
23
          color: 'yellow',
24
          _hover: {
25
            bgColor: 'yellow',
26
            color: 'black',
27
          },
28
        })}
29
        onClick={show}
30
      >
31
        Enter the Wu
32
      </Button>
33

34
      <Portal>
35
        <Modal
36
          className={css({
37
            bgColor: 'black',
38
          })}
39
          onKeyDown={handleKeyDown}
40
          ref={modalRef}
41
        >
42
          <ModalHeader>
43
            <ModalHeading
44
              className={css({
45
                color: 'yellow !important',
46
              })}
47
            >
48
              Inspectah Deck
49
            </ModalHeading>
50
            <ModalDescription>
51
              Swingin' through your town like your neighborhood Spider-man!
52
            </ModalDescription>
53
          </ModalHeader>
54

55
          <Button
56
            className={css({
57
              borderColor: 'yellow',
58
              color: 'yellow',
59
              _hover: {
60
                borderColor: 'yellow',
61
                color: 'yellow',
62
              },
63
            })}
64
            usage="outlined"
65
            onClick={close}
66
          >
67
            Close
68
          </Button>
69
        </Modal>
70
      </Portal>
71
    </div>
72
  )
73
}

API

define function Modal(props: HTMLAttributes<HTMLDialogElement>): ReactNode

define function ModalHeader(props: HTMLAttributes<HTMLDivElement>): ReactNode

define function ModalHeading(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

define function ModalDescription(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

1
import {
2
  Modal,
3
  ModalHeader,
4
  ModalHeading,
5
  ModalDescription,
6
  trapFocus,
7
  useModal
8
} from '@cerberus/react'

Usage

Basic Usage

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { hstack } from 'styled-system/patterns'
13

14
function OverviewPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button onClick={show}>Open Modal</Button>
21

22
      <Portal>
23
        <Modal onKeyDown={handleKeyDown} ref={modalRef}>
24
          <ModalHeader>
25
            <ModalHeading>This is a custom modal</ModalHeading>
26
          </ModalHeader>
27
          <ModalDescription>
28
            This is a custom modal that is can be whatever you need.
29
          </ModalDescription>
30

31
          <div
32
            className={hstack({
33
              color: 'info.text.100',
34
              mb: '10',
35
            })}
36
          >
37
            <Model size="5rem" />
38
            <Model size="5rem" />
39
            <Model size="5rem" />
40
          </div>
41

42
          <Button usage="outlined" onClick={close}>
43
            Close
44
          </Button>
45
        </Modal>
46
      </Portal>
47
    </div>
48
  )
49
}

Customization

You can customize each Modal component like you would any other component.

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { css } from 'styled-system/css'
13

14
function CustomPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button
21
        className={css({
22
          bgColor: 'black',
23
          color: 'yellow',
24
          _hover: {
25
            bgColor: 'yellow',
26
            color: 'black',
27
          },
28
        })}
29
        onClick={show}
30
      >
31
        Enter the Wu
32
      </Button>
33

34
      <Portal>
35
        <Modal
36
          className={css({
37
            bgColor: 'black',
38
          })}
39
          onKeyDown={handleKeyDown}
40
          ref={modalRef}
41
        >
42
          <ModalHeader>
43
            <ModalHeading
44
              className={css({
45
                color: 'yellow !important',
46
              })}
47
            >
48
              Inspectah Deck
49
            </ModalHeading>
50
            <ModalDescription>
51
              Swingin' through your town like your neighborhood Spider-man!
52
            </ModalDescription>
53
          </ModalHeader>
54

55
          <Button
56
            className={css({
57
              borderColor: 'yellow',
58
              color: 'yellow',
59
              _hover: {
60
                borderColor: 'yellow',
61
                color: 'yellow',
62
              },
63
            })}
64
            usage="outlined"
65
            onClick={close}
66
          >
67
            Close
68
          </Button>
69
        </Modal>
70
      </Portal>
71
    </div>
72
  )
73
}

API

define function Modal(props: HTMLAttributes<HTMLDialogElement>): ReactNode

define function ModalHeader(props: HTMLAttributes<HTMLDivElement>): ReactNode

define function ModalHeading(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

define function ModalDescription(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

1
import {
2
  Modal,
3
  ModalHeader,
4
  ModalHeading,
5
  ModalDescription,
6
  trapFocus,
7
  useModal
8
} from '@cerberus/react'

Usage

Basic Usage

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { hstack } from 'styled-system/patterns'
13

14
function OverviewPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button onClick={show}>Open Modal</Button>
21

22
      <Portal>
23
        <Modal onKeyDown={handleKeyDown} ref={modalRef}>
24
          <ModalHeader>
25
            <ModalHeading>This is a custom modal</ModalHeading>
26
          </ModalHeader>
27
          <ModalDescription>
28
            This is a custom modal that is can be whatever you need.
29
          </ModalDescription>
30

31
          <div
32
            className={hstack({
33
              color: 'info.text.100',
34
              mb: '10',
35
            })}
36
          >
37
            <Model size="5rem" />
38
            <Model size="5rem" />
39
            <Model size="5rem" />
40
          </div>
41

42
          <Button usage="outlined" onClick={close}>
43
            Close
44
          </Button>
45
        </Modal>
46
      </Portal>
47
    </div>
48
  )
49
}

Customization

You can customize each Modal component like you would any other component.

1
import { Model } from '@cerberus/icons'
2
import {
3
  Modal,
4
  ModalHeader,
5
  ModalHeading,
6
  ModalDescription,
7
  Portal,
8
  useModal,
9
  trapFocus,
10
  Button,
11
} from '@cerberus/react'
12
import { css } from 'styled-system/css'
13

14
function CustomPreview() {
15
  const { modalRef, show, close } = useModal()
16
  const handleKeyDown = trapFocus(modalRef)
17

18
  return (
19
    <div>
20
      <Button
21
        className={css({
22
          bgColor: 'black',
23
          color: 'yellow',
24
          _hover: {
25
            bgColor: 'yellow',
26
            color: 'black',
27
          },
28
        })}
29
        onClick={show}
30
      >
31
        Enter the Wu
32
      </Button>
33

34
      <Portal>
35
        <Modal
36
          className={css({
37
            bgColor: 'black',
38
          })}
39
          onKeyDown={handleKeyDown}
40
          ref={modalRef}
41
        >
42
          <ModalHeader>
43
            <ModalHeading
44
              className={css({
45
                color: 'yellow !important',
46
              })}
47
            >
48
              Inspectah Deck
49
            </ModalHeading>
50
            <ModalDescription>
51
              Swingin' through your town like your neighborhood Spider-man!
52
            </ModalDescription>
53
          </ModalHeader>
54

55
          <Button
56
            className={css({
57
              borderColor: 'yellow',
58
              color: 'yellow',
59
              _hover: {
60
                borderColor: 'yellow',
61
                color: 'yellow',
62
              },
63
            })}
64
            usage="outlined"
65
            onClick={close}
66
          >
67
            Close
68
          </Button>
69
        </Modal>
70
      </Portal>
71
    </div>
72
  )
73
}

API

define function Modal(props: HTMLAttributes<HTMLDialogElement>): ReactNode

define function ModalHeader(props: HTMLAttributes<HTMLDivElement>): ReactNode

define function ModalHeading(props: HTMLAttributes<HTMLParagraphElement>): ReactNode

define function ModalDescription(props: HTMLAttributes<HTMLParagraphElement>): ReactNode