The "Blank Modal" component allows you to create simple and customizable modal dialogs that can be used to display various types of content or messages to your users. This modal type serves as a foundation for creating customized modal experiences.
The "Blank Modal" component provides you with a starting point for creating modals with your own content and styling, making it a versatile tool for enhancing user interactions within your web application.
The "Modal Size" component allows you to create modals of different sizes to accommodate various content types or specific design requirements. You can choose from four different modal sizes: Small, Medium, Large, and Super Large, ensuring flexibility in displaying your content.
The "Modal Size" component empowers you to maintain a consistent and visually appealing design while accommodating various content types and ensuring a seamless user experience.
The "Warning Modal" component provides a user-friendly way to display warnings, errors, or important messages to your users. It features a visually appealing and attention-grabbing design, ensuring that critical information is communicated effectively.
The "Warning Modal" component ensures that important messages are presented clearly and attractively, helping users quickly grasp the nature of the warning and take appropriate actions. Customize it to suit your application's specific needs and design aesthetics.
The "Modal with Close Button" component provides an intuitive and user-friendly way to display content within a modal dialog while giving users the ability to easily close the modal when needed. This modal variation is useful for displaying messages, alerts, or additional information without the need for complex interactions.
The "Modal with Close Button" component simplifies the process of displaying information in a modal dialog while ensuring users can easily dismiss it when necessary. Customize it to match your application's style and content requirements.
The "Static Backdrop Modal" is a user-friendly way to make sure your important messages get noticed. Unlike regular pop-up windows, this one won't disappear when you click outside or press escape. It's perfect for situations where you want your users to pay full attention, like sharing important updates or guiding them through steps. With the "Static Backdrop Modal," your message stays in the spotlight until it's acknowledged.
Now, you're all set to use the "Static Backdrop Modal" and make sure your messages are seen and acknowledged with ease.
The "Overlapping Modal" is a nifty feature that allows you to display multiple modals on top of each other. It's a great way to present information progressively without overwhelming your users with too much content at once. This feature enables you to create guided experiences or step-by-step processes seamlessly.
Now you have the power of the "Overlapping Modal" at your fingertips. Use it to create user-friendly and informative experiences that lead your users through your application seamlessly. This feature ensures that your content remains organized and accessible, making it easier for users to absorb information at their own pace.
The "Header & Footer Modal" component offers a flexible way to create modals with distinctive headers and footers. These sections are perfect for adding titles, actions, and extra information to your modal dialogs.
Enhance your modals by adding titles, actions, and relevant form fields to engage your users effectively.
The "Delete Modal" component is a valuable tool for confirming critical actions that may have irreversible consequences, such as deleting records or data. This modal prompts users to make a deliberate decision before proceeding with an action.
The "Delete Modal" serves as a protective barrier against accidental deletions and provides users with an opportunity to confirm their intentions before proceeding. It helps prevent data loss and offers peace of mind when handling sensitive actions.
The "Success Modal" component is a simple and effective way to provide users with positive feedback and acknowledge successful actions within your application. This modal conveys a sense of accomplishment and offers users confirmation that they've completed a task or action.
The "Success Modal" enhances the user experience by providing clear and encouraging feedback. It helps users feel accomplished and confident in their actions, contributing to a more positive overall user journey.
The "Tiny Slider Modal" component combines the elegance of modal dialogs with the dynamic functionality of a tiny slider. It allows you to present images or content in a visually appealing and interactive way within a modal.
The "Tiny Slider Modal" is an excellent choice for showcasing images or content in a compact and interactive way. It combines the convenience of modals with the engaging functionality of a slider, making it ideal for presenting product galleries, image portfolios, or any content that benefits from a dynamic presentation.
The "Programmatically Show/Hide Modal" feature empowers you to control modal visibility through code, allowing for dynamic interactions within your web application. This section explains how to programmatically manage the display of modals.
The "Programmatically Show/Hide Modal" feature enhances your web application's interactivity by providing precise control over modal visibility. Whether you need to trigger modals based on user actions, responses from API calls, or any dynamic event, this capability enables you to create engaging user experiences tailored to your application's requirements.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the modal (default is "div"). |
| `open` | `boolean` | Whether the modal is open or closed. |
| `onClose` | `function` | Callback function to be executed when the modal is closed. |
| `staticBackdrop` | `boolean` | Whether the modal has a static backdrop (clicking outside won't close it). |
| `size` | `Size` | Size of the modal, one of "sm," "md," "lg," or "xl" (default is "md"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the modal panel (default is "div"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the modal title (default is "div"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the modal description (default is "div"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | HTML element type for the modal footer (default is "div"). |
