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

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


type Props = {|
  title: string | (() => React.Node),
  message: string,
  buttons: MessageDialogButton[],
  autofocus: boolean,
  className?: string,
  onDismiss?: (dialog: MessageDialog, buttonIndex: number) => boolean,
  onHidden?: (dialog: MessageDialog, buttonIndex: number) => any,
  children: React.Node,
  // See:
  modalSettings?: Object,

type MessageDialogButton = {
  label: string,
  primary?: boolean,
  destructive?: boolean,


  title={() => (
      <i className="share alternate icon" />
      Share Note &quot;{note && note.title}&quot;
    { label: "Cancel", cancel: true },
    { label: "Share", primary: true },
  onDismiss={(caller, buttonIndex) => {
    if (buttonIndex === 1 /* Share */) {
      // prevent the dialog from closing
      return false
    } else {
      return true
    Are you sure you want to share this note on the web? A public link will be

It produces:


Customizing modal dialog

The dialog is based on Semantic UI's Modal component. If you would like to customize it, you can specify modalSettings prop. Supported values are documented here.

  modalSettings={{ closable: true }}

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!