Modal

Version 16.1.1Github Storybook

A Modal is a page overlay that displays information and blocks interaction with the page until an action is taken or the Modal is dismissed.

Installation

yarn add @twilio-paste/modal - or - yarn add @twilio-paste/core

Usage

import {useUID} from '@twilio-paste/core/uid-library';
import {Button} from '@twilio-paste/core/button';
import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading} from '@twilio-paste/core/modal';

const ModalTrigger = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);
  const modalHeadingID = useUID();

  return (
    <div>
      <Button variant="primary" onClick={handleOpen}>
        New Project
      </Button>
      <Modal ariaLabelledby={modalHeadingID} isOpen={isOpen} onDismiss={handleClose} size="default">
        <ModalHeader>
          <ModalHeading as="h3" id={modalHeadingID}>
            Create new project
          </ModalHeading>
        </ModalHeader>
        <ModalBody></ModalBody>
        <ModalFooter>
          <ModalFooterActions>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button variant="primary">Submit</Button>
          </ModalFooterActions>
        </ModalFooter>
      </Modal>
    </div>
  );
};

Props

ariaLabelledby RequiredRequired

Accessible title for the Modal.

Type: string

isOpen RequiredRequired

Determins the state of the Modal.

Type: boolean

onDismiss RequiredRequired

Function to call when whenever the user hits "Escape" or clicks outside the dialog. It's important to close the Modal onDismiss.

Type: VoidFunction

size RequiredRequired

Control whether the Modal is default width or wide.

Type: Sizes

allowPinchZoom

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.

Type: boolean
Default

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'MODAL'

initialFocusRef

By default the first focusable element will receive focus when the Modal opens but you can provide a ref to focus instead.

Type: RefObject<any>

Inherited props

ModalHeader

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'MODAL_HEADER'

i18nDismissLabel

Accesssible text for the close button.

Type: string
Default: Close modal

Inherited props

ModalHeading

as

Overrides the default element name to apply unique styles with the Customization Provider

Type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
Default: 'h2'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'MODAL_HEADING'

Inherited props

ModalBody

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'MODAL_BODY'

Inherited props

ModalFooter

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'MODAL_FOOTER'

Inherited props

ModalFooterActions

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type: any
Default: 'MODAL_FOOTER_ACTIONS'

justify

Type: Justify