Modal

Modals are commonly used to grab the user’s attention to inform or shift focus to a particular task or action, often interrupting or locking the UI until the user takes action.

Overview

Resources

Install


yarn add @activecampaign/camp-components-modal

Variations

Modals are used throughout the ActiveCampaign platform to perform actions and present stepped user flows without taking the user to a different page.

The primary appearance of the multi-action button is used sparingly. It’s typically used in a page header bar to indicate multiple page-level actions a user can take.


import Modal from '@activecampaign/camp-components-modal';
import Giphy from '@components/giphy';
import Button from '@activecampaign/camp-components-button';
 
export default function () {
  const [hasModal, setHasModal] = useState(false);
 
  return (
    <>
      <Button onClick={() => setHasModal(true)} type="button">
        {'Fire Modal'}
      </Button>
 
      {hasModal && (
        <Modal title="Modal title" onDismiss={removeModal}>
          <Modal.Body>Modal content goes here</Modal.Body>
          <Modal.Footer>
            <Button children="Save" onClick={handleSave} type="button" />
          </Modal.Footer>
        </Modal>
      )}
    </>
  );
 
  function removeModal() {
    setHasModal(false);
  }
 
  function handleSave() {
    /**
     * This would be a great block to
     * dispatch some side effects.
     */
    removeModal();
  }
}

Use the custom modal header for alternate modal header design, or to add additional content into the modal header.


import Modal from '@activecampaign/camp-components-modal';
import styled from '@activecampaign/camp-core-styled';
import Button from '@activecampaign/camp-components-button';
import { InfoCircle } from '@activecampaign/camp-components-icon';
import Giphy from '@components/giphy';
 
export default function () {
  const [hasModal, setHasModal] = useState(false);
 
  const HeaderLeft = styled('div')({
    flex: '0 1 60%',
    display: 'flex',
    alignItems: 'center',
  });
 
  const HeaderRight = styled('div')({
    flex: '0 1 40%',
    display: 'flex',
    justifyContent: 'flex-end',
  });
 
  const HeaderIcon = styled('div')({
    margin: 'sp200 sp200 0 0',
  });
 
  const HeaderExtra = styled('span')({
    fontStyle: 'italic',
    marginTop: 'sp300',
  });
 
  const PostHeaderContent = styled(PostHeaderComponent)({
    margin: '0 sp700 sp500',
  });
 
  function PostHeaderComponent(props) {
    return (
      <div {...props}>
        Use <code>postHeader</code> prop to pass content under Main Header
      </div>
    );
  }
 
  return (
    <>
      <Button onClick={handleShow}>{'Show Modal with Custom Header'}</Button>
      {hasModal && (
        <Modal {...args} hideDismiss>
          <Modal.Header postHeader={<PostHeaderContent />}>
            <HeaderLeft>
              <HeaderIcon>
                <InfoCircle />
              </HeaderIcon>
              <Modal.Title title="Custom Modal Header" />
            </HeaderLeft>
            <HeaderRight>
              <HeaderExtra>Extra Content</HeaderExtra>
              <Modal.DismissAction onDismiss={handleDismiss} />
            </HeaderRight>
          </Modal.Header>
          <Modal.Body flushed={args.flushed} overflow={args.overflow}>
            <Giphy tag="happy" />
          </Modal.Body>
          <Modal.Footer>
            <Button.Outline children="Cancel" onClick={handleDismiss} mr="sp400" />
            <Button children="Ship it" onClick={handleDismiss} />
          </Modal.Footer>
        </Modal>
      )}
    </>
  );
 
  function handleDismiss() {
    setHasModal(false);
  }
 
  function handleShow() {
    setHasModal(true);
  }
}

To create a modal without the usual margins and padding around the body content, the flushed prop is available on Modal.Body. If you are also removing header and footer content, be sure to also include hideDismiss on Modal.


import Modal from '@activecampaign/camp-components-modal';
import Button from '@activecampaign/camp-components-button';
 
export default function () {
  const [hasModal, setHasModal] = useState(false);
 
  const removeModal = () => {
    setHasModal(false);
  };
 
  return (
    <>
      <Button onClick={() => setHasModal(true)} type="button">
        {'Fire Modal'}
      </Button>
 
      {hasModal && (
        <Modal hideDismiss>
          <Modal.Body flushed>Modal content goes here</Modal.Body>
        </Modal>
      )}
    </>
  );
}

Usage

Best practices

Modals are disruptive to a user’s workflow and should be used sparingly, as they temporarily block all other interaction and the rest of the application. Use modals for confirmations, conditional changes, and important warnings that can prevent critical errors.
Modals are also ideal to gather input necessary for continuing a short and focused task, such as renaming a Campaign.
Use cases outside of these mentioned may be better suited for a drawer or Fullscreen Takeover.
A modal should not open another modal on top of it. Consider using steps within the modal to section a larger modal into smaller parts.
A modal should not be used when it requires additional information for decision making that is unavailable in the modal itself.

Content guidelines

Modal headers should be clearly and consisely written, in sentence case and with no punctuation at the end. Avoid unneccessary or ambiguous words, but include articles like “a” and “the,” as they provide clarity especially in translating.

✅ DO

Add a new account * Create a new form * Connect your Calendly contacts

🚫 DON’T

* Add Account * Create New Form * Connect Calendly

Accessibility

Keyboard support

From the trigger that launches the modal, use space or enter to open the modal
tab will first focus on the modal dismiss (close) in the modal header before following the tab order in the modal body, followed by the modal footer actions
space or enter can also be used to select an option from the modal footer

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.