@app-studio/components

Modal

A custom content overlay that appears on top of the main screen, with support for headers, bodies, footers, and flexible positioning.

View component source

Import

import { Modal } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

import React from 'react';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';

import { Modal } from '@app-studio/components';
import { hideModal, showModal } from '@app-studio/components';

export const DefaultModal = () => {
  return (
    <>
      <Button onClick={() => showModal('DefaultModal')} isAuto>
        Blur Overlay
      </Button>
      <Modal.Layout
        modals={{
          DefaultModal: () => (
            <Modal.Container>
              <Modal.Header>
                <Text size="lg" weight="semiBold">
                  Title
                </Text>
              </Modal.Header>
              <Modal.Body>
                <Text>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                </Text>
              </Modal.Body>
              <Modal.Footer>
                <Button onClick={hideModal}>Cancel</Button>
              </Modal.Footer>
            </Modal.Container>
          ),
        }}
      />
    </>
  );
};

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.