Modal

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

function ModalExample() { const [isOpen, setIsOpen] = useState(false) return ( <> <Button onPress={() => setIsOpen(true)}>Open example modal</Button> <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} heading="This is an example modal" headingLevel="h4" bodyText="It overlays content over the page. Two usage patterns, for content and dialog, are shown below." confirmButtonText="Okay" onConfirm={() => setIsOpen(false)} /> </> ) }

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>Open example modal</Button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        heading="This is an example modal"
        headingLevel="h4"
        bodyText="It overlays content over the page. Two usage patterns, for content and dialog, are shown below."
        confirmButtonText="Okay"
        onConfirm={() => setIsOpen(false)}
      />
    </>
  )
}

Introduction

import { Modal } from '@telus-uds/components-base'

A modal window is a secondary window that opens on top of the main one.

Users have to interact with it before they can carry out their task and return to the main window.

Guidance

Use to reveal additional information to a user after they have performed an explicit interaction.

They are a strongly discouraged pattern; it's preferred to have all relevant information within a page, and irrelevant information either linked externally or omitted.

• Must only appear after a customer interaction, not on page load or any other circumstance
• Open a modal based on explicit customer action e.g. clicking on a button/link/form field
• Only one modal should be "current" at any time
• Read WebAIM's documentation to create accessible modals
• Don’t use modals to reinforce or repeat information already available in the parent page or view
• Don’t use modals consecutively

Props

Name	Type	Default	Description
children	union
copy	'en' | 'fr'
isOpen	bool
onClose	func
maxWidth	bool
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details
closeButton	node		Pass a react node to override the default close button or pass `null` to hide the close button.