Overview
The Modal component displays content in a dialog overlay, perfect for forms, confirmations, and detailed content that requires user focus.
Basic Usage
import { NSModal } from '@newtonschool/grauity';
import { useState } from 'react';
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
hideOnClickAway={true}
title="Modal Title"
description="This is a modal description"
>
<p>Modal content goes here</p>
</NSModal>
</>
);
}
Controls whether the modal is visible.
Callback function when the modal should be closed.
Banner content displayed at the top of the modal.
Title content for the modal.
Description text for the modal.
[DEPRECATED] Use children instead. Body content for the modal.
Main content for the modal. If body prop is provided, children will be rendered after it.
Action content (typically buttons) displayed at the bottom.
Whether clicking outside the modal closes it.
Apply a blur effect to the background.
Display a close button in the modal header.
Minimum width constraint.
Minimum height constraint.
Maximum width constraint.
Maximum height constraint.
Padding inside the modal.
Margin for the modal body section.
Make the modal full width at the bottom on mobile devices.
animatePresence
ModalAnimationType
default:"fade"
Animation type for opening/closing.Available choices: false, slide, slide-reverse, fade, emanate
Click event object for use with emanate animation.
shouldFocusOnFirstElement
Automatically focus the first focusable element.
Disable background scrolling when modal is open.
Overflow behavior for the modal content.
Custom border style. Default is 1px solid var(--border-subtle-primary-default, #e1e5ea).
Additional CSS class name.
With Actions
<Modal
isOpen={isOpen}
onClose={onClose}
hideOnClickAway={true}
title="Confirm Action"
description="Are you sure you want to proceed?"
action={
<>
<Button variant="primary" onClick={handleConfirm}>
Confirm
</Button>
<Button variant="tertiary" onClick={onClose}>
Cancel
</Button>
</>
}
/>
With Banner
<Modal
isOpen={isOpen}
onClose={onClose}
hideOnClickAway={true}
banner={
<div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
Banner Content
</div>
}
title="Modal with Banner"
>
<p>Modal content</p>
</NSModal>
Custom Size
<Modal
isOpen={isOpen}
onClose={onClose}
hideOnClickAway={true}
width="800px"
height="600px"
title="Large Modal"
>
<p>Content for a larger modal</p>
</NSModal>
Animation Types
// Fade (default)
<NSModal animatePresence="fade" />
// Slide from bottom
<NSModal animatePresence="slide" />
// Slide from top
<NSModal animatePresence="slide-reverse" />
// Emanate from click point
<NSModal
animatePresence="emanate"
clickEvent={clickEvent}
/>
// No animation
<NSModal animatePresence={false} />
Confirmation Dialog
For simple confirmation dialogs, use the ConfirmationDialog component:
import { ConfirmationDialog } from '@newtonschool/grauity';
<ConfirmationDialog
isOpen={isOpen}
title="Delete Item"
description="Are you sure you want to delete this item?"
confirmText="Delete"
cancelText="Cancel"
onConfirm={handleDelete}
onCancel={() => setIsOpen(false)}
confirmButtonVariant="primary"
confirmButtonColor="error"
/>
Multi-Step Modal
import { MultiStepModal } from '@newtonschool/grauity';
<MultiStepModal
isOpen={isOpen}
onClose={onClose}
modalSteps={[
{
title: 'Step 1',
description: 'First step description',
body: <div>Step 1 content</div>,
},
{
title: 'Step 2',
description: 'Second step description',
body: <div>Step 2 content</div>,
},
]}
showModalStepsPagination={true}
hideOnClickAway={false}
onFinalStep={() => console.log('Completed')}
/>