About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

InlineDialog

A dialog that displays outside a block of content in a Confluence page.

The ContextMenu:

Example of a Context menu

The InlineDialog:

Example of a Context menu

Example: Dictionary app

Usage notes

  • Usually used for small bits of information
  • InlineDialog is required for the confluence:contextMenu module

Import statement

1
2
import ForgeUI, { InlineDialog } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesThe content of the inline dialog

Example

1
2
import ForgeUI, { render, Text, ContextMenu, InlineDialog } from '@forge/ui';

const App = () => {
    return (
        <InlineDialog>
            <Text>Hello world!</Text>
        </InlineDialog>
    );
};

export const run = render(
    <ContextMenu>
        <App/>
    </ContextMenu>
);

ModalDialog

A dialog that appears in a layer above the app’s UI and requires user interaction.

Screenshot of modal dialog

Import statement

1
2
import ForgeUI, { ModalDialog } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesThe content of the modal dialog.
headerstringYesThe title of the modal dialog.
onClose() => void | Promise<void>YesThe function that is called when the modal is closed.
appearance"danger" | "warning"Shows an icon next to the header and changes the appearance of the action button. If appearance is not specified, the default appearance is a primary button with no header icon.
closeButtonTextstringThe label text displayed on the modal's close button. Defaults to Cancel.
width"small" | "medium" | "large" | "x-large"The width of the modal dialog. This can range from a small popup to almost full-screen width. Defaults to "medium".

Example

The example app below shows a ModalDialog when a Button is clicked.

1
2
const App = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <Fragment>
      <Button text="Show modal" onClick={() => setOpen(true)} />
      {isOpen && (
        <ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
          <Text>Hello there!</Text>
        </ModalDialog>
      )}
    </Fragment>
  );
};

The example app below demonstrates how to use the Form and ModalDialog components to prompt the user for information.

1
2
const App = () => {
  const [isOpen, setOpen] = useState(false);
  const [size, setSize] = useState("medium");
  return (
    <Fragment>
      <Button
        text={`Your size is ${size}. Click to change.`}
        onClick={() => setOpen(true)}
      />
      {isOpen && (
        <ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
          <Form
            onSubmit={data => {
              setSize(data.size);
              setOpen(false);
            }}
          >
            <Select label="T-shirt size" name="size">
              <Option label="Small" value="small" />
              <Option label="Medium" value="medium" />
              <Option label="Large" value="large" />
            </Select>
          </Form>
        </ModalDialog>
      )}
    </Fragment>
  );
};

Tooltip

A tooltip that displays when hovering over another component.

Screenshot of tooltip component

Import statement

1
2
import ForgeUI, { Tooltip } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenForgeElementYesThe component to wrap the tooltip around.
textstringYesThe message to display in the tooltip.

Example

A tooltip wrapping a button component. Hovering over the button will display the tooltip with Hello World.

1
2
<Tooltip text="Hello World">
    <Button
       text="Hover over me"
       onClick={() => console.log("Hello World")}
    />
</Tooltip>

Rate this page: