Props

Modal

The Modal component is a versatile UI element that displays content in a layer above the main application interface, requiring user interaction before returning to the main view. It is used for critical information, forms, confirmations, and other interactive tasks. Modals help focus user attention on specific content or actions, improving the overall user experience by preventing background interactions.

Source Built with Ariakit

Github

import { Button } from 'welcome-ui/Button'
import { Modal, useModal } from 'welcome-ui/Modal'

const Example = () => {
  const modal = useModal()

  return (
    <>
      <Modal.Trigger as={Button} store={modal}>
        Open modal
      </Modal.Trigger>
      <Modal ariaLabel="example" store={modal}>
        <Modal.Content>
          <Modal.Body iconName="file" subtitle="Description" title="Title">
            Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
            aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
            nunc. Integer suscipit sodales ex, ut lobortis orci rutrum id. Vestibulum scelerisque
            felis ut sollicitudin elementum, dolor nibh faucibus orci, eu aliquet felis diam sed
            eros. Donec eget sapien lacinia, viverra felis in, placerat urna. Vestibulum sed viverra
            orci. Donec id tellus eget dui porta lobortis ac eu metus. Praesent id ultricies odio.
            In hac habitasse platea dictumst. Sed lorem lacus, hendrerit non sodales id, consectetur
            quis magna. Nullam non lacinia risus, ut varius est. Nam nec pulvinar tellus, eu
            ultrices elit. Cras tincidunt et purus eu condimentum. Nunc vitae consequat nibh.
          </Modal.Body>
        </Modal.Content>
      </Modal>
    </>
  )
}

export default Example

Examples

Use useModal, Modal, Modal.Trigger and Modal.Body to create a simple Modal. To ensure good spacing between modal's sub-components, they must be wrapped with Modal.Content.

Window example

Github

Sizes

By default size is set to lg. If you don't want a size (fit on content), set size to auto.

Github

Header and Footer

Use Modal.Header and Modal.Footer to style your Modal.

Github

Examples of footer layouts: default "right" (checkbox left, buttons right) and "full" (checkbox full-width, buttons stacked below).

Github

onClose

On Modal add onClose to have custom function called on modal close.

Github

Without close button

On Modal.Content you can force not showing the close button with withClosingButton to false.

Github

For our cases we need to show an item in a center of a modal, with specific Backdrop background color and a close button. It's a new sub component to the modal: AssetModal.

Image

Github

Iframe

Github

Title and Subtitle

Another variant with the AssetModal.AssetWithTitle component.

Github

Swiper

Example with our <Swiper /> component.

Github

Swiper and Title

Another example with AssetModal.AssetWithTitle.

Github

We use useDialogStore from Ariakit Dialog for the state of the modal.

Pass options to useModal:

defaultOpen: e.g. const modal = useModal({ defaultOpen: true })
onClose: e.g. const modal = useModal({ onClose: () => console.log('closing the modal') })

And the hook returns (among other things):

useState('open'): whether the modal is currently open
hide: a function to hide the modal

Drawer Popover