Modal

Usage

import { Modal } from '@wdzyi/ui';

<Modal
  trigger='Publish'
  title='Publish this page?'
  confirm='Publish'
  cancel='Not yet'
  onConfirm={publish}
>
  It goes live for everyone with the link.
</Modal>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

triggerReactNode

What the button that opens it says. Leave it out to open it yourself, with open.

triggerVariant'foil' | 'filled' | 'lighter' = 'lighter'

How that button looks.

titlestring

The question. It names the dialog for screen readers.

childrenReactNode

The words under the title, which describe the dialog for screen readers.

confirm, cancelstring = 'Confirm', 'Cancel'

The two ways out. Confirm is the one in foil.

onConfirm() => void

Called when the main action is pressed, as it closes.

open, onOpenChangeboolean, (open: boolean) => void

To open and close it yourself.

classNamestring

Added to the button that opens it.

Notes

• It’s a native dialog opened with showModal, so the page behind can’t be reached and Escape works without any help.
• It scales about the centre of the button that opened it, so it sets off a little way towards it, rising out of a blur over 360ms. Closing takes 180ms, back the way it came.
• Escape, Cancel and a press on the blurred page all play the way out before the dialog really closes, so focus goes back to the button once it has gone.
• With reduced motion, it fades in and closes at once.