AI 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.
Loading...
Overview
Resources
Install
yarn add @camp/ai-modal
Variations
Default modal
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>
</>
);
}
Modal with custom overlay click handling
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>
);
}
Modal with portal rendering
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"
andaria-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:
Before (existing modal)
import Modal from '@/components/modal';
<Modal isOpen={isOpen} onClose={handleClose} title="Modal Title">
Modal content
</Modal>;
After (Agent X 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
toAiModal
- 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
Last updated on