DocSpace-client/packages/shared/components/info-badge

InfoBadge Component

The InfoBadge component is used to display information badges with tooltips.

Properties

Property	Type	Required	Default	Description
label	string	Yes	-	Badge label.
place	PlacesType	Yes	-	Global tooltip placement.
tooltipTitle	React.ReactNode	Yes	-	Tooltip header content.
tooltipDescription	React.ReactNode	Yes	-	Tooltip body content.
offset	number	Yes	-	Space between the tooltip element and anchor element (arrow not included in calculation).

Property label

• Type: string
• Required: Yes
• Default: -
• Description: Badge label.

Property place

• Type: PlacesType
• Required: Yes
• Default: -
• Description: Global tooltip placement.

Property tooltipTitle

• Type: React.ReactNode
• Required: Yes
• Default: -
• Description: Tooltip header content.

Property tooltipDescription

• Type: React.ReactNode
• Required: Yes
• Default: -
• Description: Tooltip body content.

Property offset

• Type: number
• Required: Yes
• Default: -
• Description: Space between the tooltip element and anchor element (arrow not included in calculation).

Usage Example

import React from "react";
import InfoBadge from "@docspace/shared/components";

const MyComponent = () => {
  return (
    <InfoBadge
      label="Info"
      place="top"
      tooltipTitle="Information"
      tooltipDescription="This is an information badge with a tooltip."
      offset={10}
    />
  );
};

export default MyComponent;