HelpButton

January 30, 2026 ยท View on GitHub

HelpButton is used for a action on a page

Usage

import { HelpButton } from "@docspace/ui-kit";
<HelpButton tooltipContent={<Text>Tooltip content</Text>} />
<HelpButton
  tooltipContent={
    <Text>
      Tooltip content with{" "}
      <Link isHovered={true} href="/">
        link
      </Link>
    </Text>
  }
/>

Usage with aside

<HelpButton
  tooltipContent={
    <>
      <p>This is a global react component tooltip</p>
      <p>You can put every thing here</p>
      <ul>
        <li>Word</li>
        <li>Chart</li>
        <li>Else</li>
      </ul>
    </>
  }
/>

Properties

| Props | Type | Required | Values | Default | Description | | ------------------------- | :------: | :------: | :-------------------------: | :-----: | ------------------------------------------------ | --- | ---- | -------- | --- | --- | --- | ---------- | | className | string | - | - | - | Accepts class | | displayType | oneOf | - | dropdown, aside, auto | auto | Tooltip display type | | helpButtonHeaderContent | string | - | - | - | Tooltip header content (tooltip opened in aside) | | id | string | - | - | - | Accepts id |