Modal - Keep React
Table of Contents#
- Default Modal
- Confirmation Modal
- History Modal
- All The Position of Modal
- All The Size of Modal
- API Reference
Modal components typically appear as a small window or dialog box that appears on top of the existing content, effectively "blocking" interaction with the underlying interface until the modal is dismissed.
Modal help to maintain context and prevent users from navigating away or performing other actions while the modal is active. Modals can be closed by clicking an overlay area outside the modal, pressing an "X" or "Close" button, or completing a specific action within the modal content.
A "History Modal" seems to be a component or feature that captures and displays a user's historical interactions or actions within a web application. This type of modal could serve as a summary or log of a user's past activities, possibly including login details and other information saved on the browser.
All The Position of Modal#
These positioning options ensure that the modal is displayed in a way that best suits your layout and user experience. The available positions for the modal are:
center-right. You can select the appropriate position to align the modal with your design intentions and provide a comfortable viewing experience for your users.
All The Size of Modal#
These sizes offer flexibility when designing your modals, ensuring they align with your overall design while maintaining consistency across different parts of your application. Here is all available sizes for the modal:
Explore the available props for the modal component
|onClose||Function to be called when the modal is closed.||function||()=>void|
|show||Controls the visibility of the modal.||boolean||false|
|icon||Optional icon to be displayed within the modal.||ReactNode||ReactNode|
|size||Defines the size of the modal.|
|position||Determines the position of the modal on the screen.|