Skip to Content

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

Loading...

Loading...

Loading...

Loading...

Loading...

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> </> ); }

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:

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 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

Drawer

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

Fullscreen Takeover

Fullscreen Takeover

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

Popover

Popover

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

Last updated on