Skip to main content

Balloon

Support for Balloon notification is divided into two parts. Components for decoratively rendering a Balloon, and an API for showing balloon notifications imperatively (e.g. in response to events).

Remaining features​

Declarative API​

Components used for rendering a Balloon notification:

Balloon​

Renders a single Balloon notification. Different parts of the balloon are passed as props. Timeout for hiding the balloon is not supported at this level. See useBalloonManager for that.

A tiny wrapper around Link component, to be used for actions in Balloon. It closes the balloon when pressed.

Note

How balloon notifications are stacked and positioned in bottom right, and an imperative API for triggering notifications is outside the scope of what this component is about. Use BalloonManager and useBalloonManager for that.

Live example​

Result
Loading...
Live Editor
<>
  {/* prettier-ignore */}
  <Balloon
    // try "Error", "Warning", or a custom icon: <PlatformIcon icon="expui/fileTypes/docker.svg" />
    icon={"Info"}
    // try changing title to something too long
    title="Maven Projects need to be imported"
    // depending on how big body is, it may becomes expandable
    body="Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly."
    actions={
      <>
        <BalloonActionLink>Import changes</BalloonActionLink>
        <BalloonActionLink>Enable auto-import</BalloonActionLink>
      </>
    }
    // close button is shown only if onClose is passed
    onClose={console.log}
    // header actions are placed next to the close button in the header
    headerActions={
      <AutoHoverPlatformIcon icon="ide/notification/gear" role="button" />
    }
   />
</>

Expandable body​

Body becomes expandable only if the content doesn't fit within the allowed number of lines. The expanded state can optionally be controlled.

Result
Loading...
Live Editor
<>
  {/* prettier-ignore */}
  <Balloon
    body="Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly."
    //     expanded
   />
</>

Imperative API​

BalloonManager​

BalloonManager renders the necessary context for using useBalloonManager, as well as the stack of the notifications. By default it renders the notifications stack as a portal appended to body. This can be disabled by setting disablePortal to true. Either way, the notifications stack is an overlay placed at the bottom right of where it's rendered. If portal is disabled, position will be absolute, otherwise fixed.

useBalloonManager​

useBalloonManager gives access to the imperative API for showing balloon notifications.

const { show, showSticky } = useBalloonManager();
Result
Loading...
Live Editor
const App = () => (
  <BalloonManager>
    <SomeComponent />
  </BalloonManager>
);
const SomeComponent = () => {
  const { show } = useBalloonManager();
  const showNotification = () => {
    show({
      title: "Maven projects need to be imported",
      body: "Projects to be imported: MavenSync, MavenDependencies. Maven project structure has been changed. Import changes to IntelliJ IDEA project to make it work correctly. Otherwise, code analysis, completion and other features might work incorrectly.",
      actions: (
        <>
          <BalloonActionLink>Import changes</BalloonActionLink>
          <BalloonActionLink>Enable auto-import</BalloonActionLink>
        </>
      ),
    });
  };
  return <Button onPress={showNotification}>Show balloon notification</Button>;
};

render(<App />);