Modal

Display popup content that requires attention or provides additional information.

Usage

First of all, you need to import the Modal component from the kitchn package.

import { Modal } from "kitchn"

💡

This component renders content inside of a Drawer at small viewports. It contains a set of components that can be used to create a modal (e.g. Modal.Header, Modal.Body, Modal.Action).

Default

Code Editor

() => {
  const [active, open, close] = useModal();

  return (
    <Container>
      <Button size={"normal"} onClick={open}>
        Open Modal
      </Button>
      
      <Modal.Modal active={active} onClickOutside={close}>
        <Modal.Body>
          <Modal.Header>
            <Modal.Title>Modal</Modal.Title>
            <Modal.Subtitle>This is a modal.</Modal.Subtitle>
          </Modal.Header>

          <Text>Some content contained within the modal.</Text>
        </Modal.Body>

        <Modal.Actions>
          <Modal.Action type={"dark"} onClick={close}>Cancel</Modal.Action>

          <Modal.Action type={"light"} onClick={close}>Submit</Modal.Action>
        </Modal.Actions>
      </Modal.Modal>
    </Container>
  );
}

Disabled actions

Code Editor

() => {
    const [active, open, close] = useModal();

    return (
      <Container>
        <Button size={"normal"} onClick={open}>
          Open Modal (with disabled actions)
        </Button>
        <Modal.Modal active={active} onClickOutside={close}>
          <Modal.Body>
            <Modal.Header>
              <Modal.Title>Modal</Modal.Title>
              <Modal.Subtitle>This is a modal.</Modal.Subtitle>
            </Modal.Header>

            <Text>Some content contained within the modal.</Text>
          </Modal.Body>

          <Modal.Actions>
            <Modal.Action type={"dark"} onClick={close}>Cancel</Modal.Action>

            <Modal.Action type={"light"} onClick={close} disabled>
              Submit
            </Modal.Action>
          </Modal.Actions>
        </Modal.Modal>
      </Container>
    );
}

Callback

Code Editor

() => {
    const [active, open, close] = useModal();

    const submit = React.useCallback(() => {
      alert("Submitted!");
      close();
    }, []);

    return (
      <Container>
        <Button size={"normal"} onClick={open}>
          Open Modal (with callback)
        </Button>
        <Modal.Modal
          active={active}
          onClickOutside={close}
          onEnterKeyPress={submit}
        >
          <Modal.Body>
            <Modal.Header>
              <Modal.Title>Modal</Modal.Title>
              <Modal.Subtitle>This is a modal.</Modal.Subtitle>
            </Modal.Header>

            <Text>Some content contained within the modal.</Text>
          </Modal.Body>

          <Modal.Actions>
            <Modal.Action type={"dark"} onClick={close}>Cancel</Modal.Action>

            <Modal.Action type={"light"} onClick={submit}>Submit</Modal.Action>
          </Modal.Actions>
        </Modal.Modal>
      </Container>
    );
}

Inset

Code Editor

() => {
    const [active, open, close] = useModal();

    return (
      <Container>
        <Button size={"normal"} onClick={open}>
          Open Modal (with inset)
        </Button>
        <Modal.Modal active={active} onClickOutside={close}>
          <Modal.Body>
            <Modal.Header>
              <Modal.Title>Modal</Modal.Title>
              <Modal.Subtitle>This is a modal.</Modal.Subtitle>
            </Modal.Header>

            <Modal.Inset>
              <Text>Content within the inset.</Text>
            </Modal.Inset>

            <Text
              style={{
                marginTop: 20,
              }}
            >
              Content outside the inset.
            </Text>
          </Modal.Body>

          <Modal.Actions>
            <Modal.Action type={"dark"} onClick={close}>Cancel</Modal.Action>

            <Modal.Action type={"light"} onClick={close}>Submit</Modal.Action>
          </Modal.Actions>
        </Modal.Modal>
      </Container>
    );
}

Props

Name	Type	Default	Required	Description	Accepted values
`active`	`boolean`	-	✅	Whether the modal is active or not.	-
`onAnimationDone`	`function`	-	-	Callback function that is called when the animation is done.	`() => void`
`onClickOutside`	`function`	-	-	Callback function that is called when the user clicks outside the modal.	`() => void`
`onEnterKeyPress`	`function`	-	-	Callback function that is called when the user presses the `Enter` key.	`() => void`
`children`	`ReactNode`	-	✅	The content of the modal.	-

Last updated on March 5, 2025

Link Menu