Available since v3.5.1.

A built-in React component of Inkdrop that allows you to display a simple modal dialog with buttons. To get the class of Dialog component:

const Dialog = inkdrop.components.getComponentClass("Dialog")


type Props = {
  className?: string,
  children?: React.Node,
  visible: boolean,
  hiding: boolean,
  onBackdropClick?: () => any,
  autofocus?: boolean,


"use babel"

import React, { useEffect, useCallback } from "react"
import { logger, useModal } from "inkdrop"

const HelloMessageDialog = props => {
  const modal = useModal()
  const { Dialog } = inkdrop.components.classes

  const toggle = useCallback(() => {
    logger.debug("Dialog was toggled!")
  }, [])

  useEffect(() => {
    const sub = inkdrop.commands.add(document.body, {
      "yourplugin:toggle": toggle,
    return () => sub.dispose()
  }, [toggle])

  return (
    <Dialog {...modal.state} onBackdropClick={modal.close}>
      <Dialog.Content>Hello, world!</Dialog.Content>
        <button className="ui button" onClick={modal.close}>

export default HelloMessageDialog

It produces:


See also

Can you help us improve these docs?

The source of these docs is here on GitHub. If you see a way these docs can be improved, please fork us!