Skip to main content

Modal

A modal component that lets you open content in a dialog.

Import#

import { Modal } from '@pixby/ui';
  • Modal: The component that provides the context to the other components.
  • Modal.Content: Adds padding around the content.
  • Modal.CloseButton: A button that closes the modal.

Usage#

Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
Live Editor

Props#

isOpen#

Toggle the modal with the isOpen prop.

onClose#

onClose is called whenever the overlay or close button are clicked on.

closeOnOverlayClick#

You can stop the modal from closing when you click outside the content using the closeOnOverlayClick prop.

You should probably include some other way of closing the modal, for example the Modal.CloseButton.

Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
Live Editor

size#

Use the size prop to set the width of the modal. Possible values are xs, sm, md, lg, xl, or a custom value like w-full md:w-72. The default is md.

Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
Live Editor

Modal.CloseButton#

Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
Live Editor

Accessability#

Modal follows the practices for dialog modal found at WAI-ARIA Authoring Practices.

  • Esc closes the modal.
  • Focus is locked inside the modal.
  • The trigger gains focus after the modal is closed.
  • The modal has a role of dialog.
  • The modal has aria-modal="true"
Edit this page