InfoBox

import { InfoBox, InfoBoxContent, InfoBoxTrigger } from "@fanvue/ui";
import type {
  InfoBoxAction,
  InfoBoxContentProps,
  InfoBoxProps,
  InfoBoxTriggerProps,
} from "@fanvue/ui";

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>

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>

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>

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>

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>