Modal

Modal #

Modal components are used to enable users to display messages or forms without leaving the page.

import { PModal } from 'pearkit';

Basic #

A simple modal component wrapped into an POverlay component.

const [modalStatus,setModalStatus] = useState(false);
    
<PButton onClick={() => setModalStatus(true)}>Open Basic Modal</PButton>
<PModal
    modalTitle="Lorem Ipsum Modal"
    status={modalStatus}
    close={() => setModalStatus(false)}
>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sequi.</p>
</PModal>

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the modal component.

Name	Type	Default	Description
modalHeader	ReactNode	null	Override header of the component.
status	boolean	false	Status state of the component
closable	boolean	true	Closable state of the component
modalTitle	string	null	Modal Title of the component
overlayColor	TwColor \| Tailwind color names union + 'white' and 'black' name support	black	Change overlay colors of the component
size	string \| small \| default \| large \| full	default	Size of the component
close	function	void	Close method of the component

Input

Overlay