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

Disabled actions

Callback

Inset

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.	-

Input Note