Modal
The Modal component is used to display content in a modal dialog.
Installation
Usage
Here is an example of how to use the Modal component.
Example
Modal with Trigger
The Modal component can be used with a custom trigger button.
Single button
The Modal component can be used with a single button.
Disabled actions
The Modal component can be used with disabled actions.
Modal with custom width
The Modal component can be used with a custom width.
Preview Component
The component that you see on preview
Animation Variants
The Modal component supports multiple animation variants for opening and closing. You can set the animation variant by passing the animationVariant prop to the Modal component.
Props
Here's how the props table would look for the Modal component, formatted in the same style:
Modal
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | The children of the Modal component. |
| onClickOutside | () => void | undefined | The function to call when the user clicks outside the modal. |
| animationVariant | "default" | "fade" | "zoom" | "scaleBounce" | "slideUp" | "slideDown" | "slideRight" | "slideLeft" | "flip" | "rotate" | "default" | Specifies the animation style for opening and closing the modal. Each variant provides a different visual effect. |
ModalAction
| Name | Type | Default | Description |
|---|---|---|---|
| fullWidth | boolean | false | Determines if the action button should take the full width. |
| onClick | () => void | Promise<void> | undefined | The function to call when the user clicks the action. |
Trigger
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | The children of the Modal component. |
| onClick | () => void | undefined | The function to call when the user clicks the trigger. |
| asChild | boolean | false | Render as a child component. |
DivProps
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | "" | Additional class names for the container. |
| children | ReactNode | undefined | The children of the component. |
PTagProps
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | "" | Additional class names for the paragraph element. |
| children | ReactNode | undefined | The children of the paragraph element. |