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