Modal Component Catalog

Modal Categories

Modal Configuration

Icon Position

Footer Alignment

Button Style

Gray Footer

Modal Types

types

Basic Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={true}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={false}

title="Basic Modal"
saveButtonText="Save Changes"
modalType="tabs"
>
<p>This is a basic modal with tabs layout.</p>
</Modal>

Success Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={false}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={true}

title="Payment successful"
saveButtonText="Go back to dashboard"
modalType="success"
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
</Modal>

Warning Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={false}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={true}

title="Warning"
saveButtonText="Proceed Anyway"
modalType="warning"
>
<p>This action may have consequences. Are you sure you want to proceed?</p>
</Modal>

Alert Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={false}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={true}

title="Delete Account"
saveButtonText="Delete"
modalType="alert"
>
<p>Are you sure you want to delete your account? This action cannot be undone.</p>
</Modal>

Info Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={false}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={true}

title="Information"
saveButtonText="Got it"
modalType="info"
>
<p>Here's some important information you should know.</p>
</Modal>

Tabs Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={true}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={false}

title="Modal with Tabs"
saveButtonText="Save Changes"
modalType="tabs"
>
<div className="flex border-b mb-4">
  <button className="px-4 py-2 border-b-2 border-primary">Tab 1</button>
  <button className="px-4 py-2">Tab 2</button>
  <button className="px-4 py-2">Tab 3</button>
</div>
<p>Content for Tab 1</p>
</Modal>

Customization Options

customization

Icon Position

The Modal component supports different icon positions for non-tabs modals:

Left: Icon appears on the left side with left-aligned text
Center: Icon appears centered above the text (default)
Right: Icon appears on the right side with left-aligned text

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={false}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={true}

title="Deactivate account"
saveButtonText="Deactivate"
modalType="alert"
>
<p>Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.</p>
</Modal>

Custom Modal

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSave={() => {
  // Handle save action
  setIsOpen(false);
}}
dismissButton={true}
footerAlignment="justified"
buttonStyle="default"
iconPosition="center"
showIcon={false}

title="Custom Modal"
saveButtonText="Complete"
modalType="success"
>
<div className="space-y-4">
  <p>This is a custom modal with unique styling and content.</p>
  <div className="bg-purple-50 p-3 rounded-md border border-purple-200">
    <p className="text-purple-800 text-sm">Custom content can be added here.</p>
  </div>
</div>
</Modal>