Modal
Pop up a dialog box, demanding attention like a traffic stop sign, ideal for critical interactions.
Installation
CLI
Manual
Basic
View
Code
Alert Modal
View
Code
Controlled
View
Code
Sizes
The modal is set to lg
by default. You can adjust it to any size from the available options.
View
Code
Sticky
You can use the Modal.Body
component to make the body of the modal sticky.
View
Code
Nested
View
Code
Triggered By Menu
View
Code
It might be a good idea to extract the modal into a separate component for better organization.
This action works both for Modal
and Sheet
component.
Look at these example
interface ModalActionProps {
state: string
onOpenChange: (state: string) => void
actionType: { description: string; action: () => void; confirmText: string; title: string }
disabled: boolean
}
const ModalAction = (props: ModalActionProps) => (
<Modal.Content isOpen={props.state !== ''} onOpenChange={props.onOpenChange}>
<Modal.Header>
<Modal.Title>{props.actionType?.title}</Modal.Title>
<Modal.Description>{props.actionType?.description}</Modal.Description>
</Modal.Header>
<Modal.Footer>
<Button slot='close' variant='outline'>
Cancel
</Button>
<Button
variant={props.state === 'restore' ? 'primary' : 'danger'}
isDisabled={loading}
isPending={loading}
onPress={actions(state)?.action}
>
{actions(state)?.confirmText}
</Button>
</Modal.Footer>
</Modal.Content>
)
Then you can use it like this.
<ModalAction
state={state}
onOpenChange={closeModal}
actionType={actionType(state)}
disabled={loading}
/>
With that, now we can modify the actionType
function to return the initial state.
const actionType = (t: string) => {
const initialsState = {
title: '',
description: '',
confirmText: '',
action: () => {}
}
switch (t) {
case 'delete': ...
case 'ban': ...
case 'restore': ...
default:
return initialsState
}
}