> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# InfoBox

> An explanatory popover anchored to a trigger, built from InfoBoxTrigger and InfoBoxContent.

```tsx theme={null}
import { InfoBox, InfoBoxContent, InfoBoxTrigger } from "@fanvue/ui";
import type {
  InfoBoxAction,
  InfoBoxContentProps,
  InfoBoxProps,
  InfoBoxTriggerProps,
} from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-infobox--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="300" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="InfoBox — Default" />
</Frame>

```tsx theme={null}
import { InfoBox, InfoBoxContent, InfoBoxTrigger, InfoCircleIcon } from "@fanvue/ui";

<InfoBox defaultOpen>
  <InfoBoxTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </InfoBoxTrigger>
  <InfoBoxContent heading="Title">Info text</InfoBoxContent>
</InfoBox>
```

## With Icon

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-infobox--with-icon&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="300" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="InfoBox — With Icon" />
</Frame>

```tsx theme={null}
import { InfoBox, InfoBoxContent, InfoBoxTrigger, InfoCircleIcon } from "@fanvue/ui";

<InfoBox defaultOpen>
  <InfoBoxTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </InfoBoxTrigger>
  <InfoBoxContent
    icon={<InfoCircleIcon className="size-5 text-content-primary-inverted" />}
    heading="Title"
  >
    Info text
  </InfoBoxContent>
</InfoBox>
```

## Full

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-infobox--full&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="300" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="InfoBox — Full" />
</Frame>

```tsx theme={null}
import { InfoBox, InfoBoxContent, InfoBoxTrigger, InfoCircleIcon } from "@fanvue/ui";

<InfoBox defaultOpen>
  <InfoBoxTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </InfoBoxTrigger>
  <InfoBoxContent
    icon={<InfoCircleIcon className="size-5 text-content-primary-inverted" />}
    heading="Title"
    pill={
      <span className="typography-description-12px-semibold rounded-full bg-buttons-primary-default px-3 py-1 text-content-primary-inverted">
        Example
      </span>
    }
    primaryAction={{ label: "OK" }}
    secondaryAction={{ label: "Dismiss" }}
  >
    Info text
  </InfoBoxContent>
</InfoBox>
```

## With Pill

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-infobox--with-pill&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="300" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="InfoBox — With Pill" />
</Frame>

```tsx theme={null}
import { InfoBox, InfoBoxContent, InfoBoxTrigger, InfoCircleIcon } from "@fanvue/ui";

<InfoBox defaultOpen>
  <InfoBoxTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </InfoBoxTrigger>
  <InfoBoxContent
    heading="Title"
    pill={
      <span className="typography-description-12px-semibold rounded-full bg-buttons-primary-default px-3 py-1 text-content-primary-inverted">
        Example
      </span>
    }
  >
    Info text
  </InfoBoxContent>
</InfoBox>
```

## Bottom Placement

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-infobox--bottom-placement&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="300" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="InfoBox — Bottom Placement" />
</Frame>

```tsx theme={null}
import { InfoBox, InfoBoxContent, InfoBoxTrigger, InfoCircleIcon } from "@fanvue/ui";

<InfoBox defaultOpen>
  <InfoBoxTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </InfoBoxTrigger>
  <InfoBoxContent side="bottom" heading="Title">
    Info text
  </InfoBoxContent>
</InfoBox>
```

## Props

## InfoBox

Root component that manages open/close state for an info box.

A direct re-export of the Radix `PopoverPrimitive.Root` primitive. It accepts all of that primitive's props, unchanged.

## InfoBoxContent

<ParamField path="asChild" type="boolean" />

<ParamField path="heading" type="ReactNode">
  Heading text rendered at the top of the info box.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Icon element displayed to the left of the heading.
</ParamField>

<ParamField path="pill" type="ReactNode">
  Pill or badge element displayed to the right of the heading.
</ParamField>

<ParamField path="primaryAction" type="InfoBoxAction">
  Primary action button (brand green).
</ParamField>

<ParamField path="secondaryAction" type="InfoBoxAction">
  Secondary action button (ghost).
</ParamField>

<ParamField path="showArrow" type="boolean" default="true">
  Whether to show the directional arrow pointer.
</ParamField>

## InfoBoxTrigger

The element that triggers the info box on click.

On touch / pen, a press-and-release that crosses a small movement threshold is treated as a drag and the resulting synthetic click is suppressed — defends against Android Chrome opening the popover on a scroll-drag-end.

<ParamField path="asChild" type="boolean" />

## Exported types

Also exported from `@fanvue/ui`: `InfoBoxAction`, `InfoBoxContentProps`, `InfoBoxProps`, `InfoBoxTriggerProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)