Inline message

An inline message lets users know when important information is available or when an action is required.

Installation

Package installation information
Installyarn add @atlaskit/inline-message
SourceBitbucket.org, (opens new window)
npm@atlaskit/inline-message, (opens new window)
Bundleunpkg.com, (opens new window)

Props

appearance

Description

Set the icon to be used before the title. Options are: connectivity, confirmation, info, warning, and error.

Default"connectivity"
Type"connectivity" | "confirmation" | "info" | "warning" | "error"

children

Description

The elements to be displayed by the popup.

Typestring | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal

fallbackPlacements

Deprecated
Description

This is a list of backup placements for the popup 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.

@private No-op when platform-dst-top-layer is enabled — CSS Anchor Positioning generates fallbacks automatically via position-try-fallbacks.

TypePopupPlacement[]

iconLabel

Description

Text to be used as the label for the button icon. You must use this to provide information for people who use assistive technology when there is no title and/or secondaryText.

Typestring

placement

Description

The placement to be passed to the popup. Determines where around the text the dialog is displayed.

Default"bottom-start"
TypeAutoPlacement | BasePlacement | VariationPlacement

secondaryText

Description

Text to display second.

Default""
Typestring | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal

spacing

Description

The spacing of the underlying icon button. Options are: spacious and compact.

Default"spacious"
Type"spacious" | "compact"

testId

Description

A unique string that appears as a data attribute, data-testid, in the rendered code. It is provided to serve as a hook for automated tests.

The value of testId is attached to the different sub-components in Inline Message:

  • testId: the top-level inline message component
  • testId--popup: the content of the message
  • testId--button: the button element that opens the dialog on press
  • testId--title: the title of the message
  • testId--text: the text of the message
Typestring

title

Description

Text to display first, bolded for emphasis.

Default""
Typestring | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License