Inline dialog

An inline dialog is a pop-up container for small amounts of information. It can also contain controls.

Caution

We are planning on deprecating Inline dialog. We recommend using the Popup component instead.

View Popup documentation

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/inline-dialog`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/inline-dialog, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`children`
Required
Description	The elements that the InlineDialog will be positioned relative to.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`content`
Required
Description	The elements to be displayed within the InlineDialog.
Type	`ReactNode \| (() => ReactNode)`

`createAnalyticsEvent`
Description	You should not be accessing this prop under any circumstances. It is provided by `@atlaskit/analytics-next` and integrated in the component
Type	`(payload: AnalyticsEventPayload) => UIAnalyticsEvent`

`fallbackPlacements`
Description	This is a list of backup placements to try. When the preferred placement doesn't have enough space, the modifier will test the ones provided in the list, and use the first suitable one. If no fallback placements are suitable, it reverts back to the original placement.
Type	`Placement[]`

`isOpen`
Description	Sets whether to show or hide the dialog.
Type	`boolean`

`onClose`
Description	Function called when the dialog is open and a click occurs anywhere outside the dialog.
Type	`(obj: { isOpen: boolean; event: Event; }) => void`

`onContentBlur`
Description	Function called when you lose focus on the object.
Type	`() => void`

`onContentClick`
Description	Function called when user clicks on the open dialog.
Type	`() => void`

`onContentFocus`
Description	Function called when user focuses on the open dialog.
Type	`() => void`

`placement`
Description	Where the dialog should appear, relative to the contents of the children.
Type	`"auto" \| "auto-start" \| "auto-end" \| "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end"`

`ref`
Description	No description.
Type	`((instance: any) => void) \| RefObject<any>`

`strategy`
Description	Placement strategy used. Can be 'fixed' or 'absolute'. Defaults to 'fixed'.
Type	`"fixed" \| "absolute"`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.