Modal

Overview

A Modal is a window overlay that communicates or provides an action within the same process. Modals are a type of dialog that are used to provide important information or ask for user input necessary to complete a user's workflow. Modals should be used sparingly and only in situations where they provide clear value and enhance the user's experience. When used appropriately, a modal can be an effective way to grab the user's attention, provide important information, and guide them through a specific task or workflow.

Anatomy

import { Modal } from "@wonderflow/react-components";

export default () => {
  const [visible, setVisible] = useState<boolean>(false);

  return (
      <ResponsiveProvider>
        <Button onClick={() => setVisible(true)} >Show Modal</Button>

        <Modal
          isVisible={visible}
          onCloseModal={() => setVisible(false)}
          title= 'Delete account?'
          subtitle= 'This action cannot be undone'
          hideHeaderBorder
          hideFooterBorder
          content={<Text>...</Text>}
          primaryAction={<Button>Delete</Button>}
          secondaryAction={<Button>Cancel</Button>}
          />

      </ResponsiveProvider>
  )
};

Design Guidelines

When to use

When not to use

Best practice

Keep the content relevant: Include only the essential information and actions that are required to complete the current task. Avoid overloading the modal with unnecessary content. Use modals sparingly: Modals should only be used when it's necessary to temporarily interrupt the user's workflow to gather important information or to convey a critical message.

Avoid displaying a modal over another modal. Instead, consider adding the additional information to the existing modal content or directing users to a new screen. Avoid using nested modals. If a confirmation modal is required to approve a task in the first modal, the first task should not be performed in a modal.

Sizes

The modal is available in three sizes: 720px (large), 600px (medium) and 480px (Small).
Use the large size for more complex workflows. Regardless of the size selected, the Modal component's height grows dynamically with the content. On smaller screens with a width of less than 480px pixels or using a small screen size breakpoint, the Modal component expands to the full width of the screen, and its footer and actions are fixed to the bottom.

Custom Modal

In order to create custom Modal components, be sure to use the three sub-components Modal.Header, Modal.Content, and Modal.Footer to keep the Modal structure consistent and pass custom elements as children.

import { Modal } from "@wonderflow/react-components";

export const CustomModal = () => {
  const [visible, setVisible] = useState(false);

  return (
    <ResponsiveProvider>
      <Button onClick={() => setVisible(true)} >Show Modal</Button>

      <Modal
        isVisible={visible}
        onCloseModal={() => setVisible(false)}
        >
        <Modal.Header>...</Modal.Header>
        <Modal.Content>...</Modal.Content>
        <Modal.Footer>...</Modal.Footer>
      </Modal>

    <ResponsiveProvider>
  );
};

API Reference

Modal

Modal.Header

Modal.Content

Modal.Footer

Accessibility

Adheres to the dialog role requirements.

Keyboard interactions