Modal

The Agent X modal component provides a focused overlay dialog for important actions and information that require user attention. It’s designed specifically for AI-powered interfaces.

Overview

Resources

Install


yarn add @camp/ai-modal

Variations

The default modal provides a clean, focused dialog with a close button and overlay click handling.


import { AiModal } from '@camp/ai-modal';
import { AiButton } from '@camp/ai-button';
import { useState } from 'react';
 
function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <>
      <AiButton appearance="primary" size="medium" onClick={() => setIsOpen(true)}>
        Open Modal
      </AiButton>
      <AiModal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <Text type="body">Modal content goes here</Text>
      </AiModal>
    </>
  );
}

Customize the overlay click behavior to prevent accidental dismissal or add confirmation logic.


import { AiModal } from '@camp/ai-modal';
import { useState } from 'react';
 
function ModalWithOverlayClick() {
  const [isOpen, setIsOpen] = useState(false);
 
  const handleOverlayClick = (onClose: () => void) => {
    // Custom logic before closing
    if (confirm('Are you sure you want to close this modal?')) {
      onClose();
    }
  };
 
  return (
    <AiModal isOpen={isOpen} onClose={() => setIsOpen(false)} onOverlayClick={handleOverlayClick}>
      <h2>Modal with Custom Overlay Click</h2>
      <p>Click outside to see the confirmation dialog.</p>
    </AiModal>
  );
}

Use portal rendering to ensure the modal appears above all other content, even when nested in complex layouts.


import { AiModal } from '@camp/ai-modal';
import { useState } from 'react';
 
function ModalWithPortal() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <AiModal isOpen={isOpen} onClose={() => setIsOpen(false)} renderInPortal={true}>
      <div>
        <Text type="heading" as="h2" size="large" style={{ marginBottom: '12px' }}>
          Portal Rendered Modal
        </Text>
        <Text type="body" style={{ marginTop: '16px' }}>
          This modal is rendered in a portal (document.body). It should appear with identical
          styling but with proper z-index stacking above all other content.
        </Text>
      </div>
    </AiModal>
  );
}

Usage

Best practices

Use modals sparingly as they interrupt user workflow and block other interactions
Keep modal content focused and concise - avoid overwhelming users with too much information
Provide clear actions and escape routes (close button, overlay click, escape key)
Use modals for confirmations, important warnings, or focused tasks that require immediate attention
Consider using drawers or fullscreen takeovers for longer content or multi-step workflows
Ensure modal content is accessible with proper ARIA attributes and keyboard navigation

Content guidelines

✅ DO

Use clear, descriptive titles that explain the modal purpose ‘Keep content concise and focused on a single task or decision’,
Provide clear primary and secondary actions when needed
Use sentence case for headings and button labels
Include articles (a, the) for clarity, especially for translation

🚫 DON’T

Open multiple modals simultaneously
Use modals for displaying large amounts of content or complex forms
Hide critical information that users need to make decisions
Use vague or ambiguous language in titles and actions
Forget to provide keyboard and screen reader accessibility

Accessibility

The Agent X modal component includes comprehensive accessibility features:

Keyboard navigation: Tab key cycles through focusable elements within the modal
Escape key: Pressing Escape closes the modal
Focus management: Automatically focuses the first focusable element when opened
ARIA attributes: Proper role="dialog" and aria-modal="true" attributes
Screen reader support: Close button includes proper aria-label
Focus trapping: Prevents focus from leaving the modal while open

Replacing this component in ACF App

The Agent X modal component is designed to replace existing modal implementations in the ACF App. Here’s how to migrate:


import Modal from '@/components/modal';
 
<Modal isOpen={isOpen} onClose={handleClose} title="Modal Title">
  Modal content
</Modal>;


import { AiModal } from '@camp/ai-modal';
 
<AiModal isOpen={isOpen} onClose={handleClose}>
  <h2>Modal Title</h2>
  Modal content
</AiModal>;

Breaking changes

Component import: Change from @/components/modal to @camp/ai-modal
Component name: Change from Modal to AiModal
Title prop: Remove the title prop - add title as a heading element inside the modal
Footer prop: Remove the footer prop - add footer content directly inside the modal
Body prop: Remove the Body component wrapper - add content directly inside the modal

Similar components

Drawer

A panel that slides in from the edge of the screen to display options or information.

Fullscreen Takeover

A full screen modal that takes over the entire screen to focus on more complex tasks.

Popover

A transient view that shows on top of other content onscreen when requested.