Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Modal

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.

Version 16.1.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/modal - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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

Props page anchor
Modal page anchor

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

ModalHeader

ModalHeader page anchor

element

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

Type
string
Default
'MODAL_HEADER'

i18nDismissLabel

Accesssible text for the close button.

Type
string
Default
Close modal

ModalHeading

ModalHeading page anchor

as

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

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

display

Responsive style prop of CSS display values

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

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

Type
string
Default
'MODAL_HEADING'

id

Same as the HTML id attribute.

Type
string

ModalBody

ModalBody page anchor

element

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

Type
string
Default
'MODAL_BODY'

ModalFooter

ModalFooter page anchor

element

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

Type
string
Default
'MODAL_FOOTER'

ModalFooterActions

ModalFooterActions page anchor

element

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

Type
string
Default
'MODAL_FOOTER_ACTIONS'

justify

Type
Justify