Callout

A high-contrast popover to draw attention to features and information.

Usage

To create a callout, import and compose the following <Callout> components:

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutTitle,
  CalloutTrigger,
} from "stylus-ui/Callout";

export default () => (
  <Callout defaultOpen>
    <CalloutTrigger asChild>
      <Button variant="secondary">Open Callout</Button>
    </CalloutTrigger>
    <CalloutContent>
      <CalloutTitle title="Callout" />
      <CalloutDescription>
        Callouts bring attention to a particular element or feature.
      </CalloutDescription>
    </CalloutContent>
  </Callout>
);

Usage without a trigger

For scenarios where you want to position the callout without a trigger, you can use <CalloutAnchor>.

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutTitle,
  CalloutAnchor,
} from "stylus-ui/Callout";

export default () => (
  <Callout defaultOpen>
    <CalloutAnchor />
    <CalloutContent>
      <CalloutTitle title="Callout" />
      <CalloutDescription>
        Callouts bring attention to a particular element or feature.
      </CalloutDescription>
    </CalloutContent>
  </Callout>
);

Title icon

You can pass a Font Awesome icon into <CalloutTitle>.

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutTitle,
  CalloutTrigger,
} from "stylus-ui/Callout";
import { faSparkles } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Callout>
    <CalloutTrigger asChild>
      <Button variant="secondary">Open Callout</Button>
    </CalloutTrigger>
    <CalloutContent>
      <CalloutTitle title="Callout with icon" icon={faSparkles} />
      <CalloutDescription>
        Import your Font Awesome icon and pass it to{" "}
        <code>&lt;CalloutTitle&gt;</code>.
      </CalloutDescription>
    </CalloutContent>
  </Callout>
);

Buttons

To display buttons in your callout, you can pass primaryAction, primaryActionText, secondaryAction, and secondaryActionText to <CalloutContent>.

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutTitle,
  CalloutTrigger,
} from "stylus-ui/Callout";
import { useToast } from "stylus-ui/Toast";

export default () => {
  const { toast } = useToast();
  const handlePrimaryAction = () => toast({ title: "Clicked primary action" });
  const handleSecondaryAction = () =>
    toast({ title: "Clicked secondary action" });

  return (
    <Callout>
      <CalloutTrigger asChild>
        <Button variant="secondary">Open Callout</Button>
      </CalloutTrigger>
      <CalloutContent
        primaryAction={handlePrimaryAction}
        primaryActionText="Primary Action"
        secondaryAction={handleSecondaryAction}
        secondaryActionText="Secondary Action"
      >
        <CalloutTitle title="Callout with buttons" />
        <CalloutDescription>
          Buttons defined in <code>&lt;CalloutContent&gt;</code> will display
          below.
        </CalloutDescription>
      </CalloutContent>
    </Callout>
  );
};

Close button

To display a close button on the callout, set showCloseButton on <CalloutContent>.

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutTitle,
  CalloutTrigger,
} from "stylus-ui/Callout";

export default () => (
  <Callout>
    <CalloutTrigger asChild>
      <Button variant="secondary">Open Callout</Button>
    </CalloutTrigger>
    <CalloutContent showCloseButton>
      <CalloutTitle title="Callout with close button" />
      <CalloutDescription>
        A close icon will display in the top right.
      </CalloutDescription>
    </CalloutContent>
  </Callout>
);

Arrows

To display an arrow pointing to the trigger, set withArrow on <CalloutContent>.

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutTitle,
  CalloutTrigger,
} from "stylus-ui/Callout";

export default () => (
  <Callout>
    <CalloutTrigger asChild>
      <Button variant="secondary">Open Callout</Button>
    </CalloutTrigger>
    <CalloutContent withArrow>
      <CalloutTitle title="Callout with arrow" />
      <CalloutDescription>
        An arrow points to the callout trigger.
      </CalloutDescription>
    </CalloutContent>
  </Callout>
);

Images

To display an image in the callout, import <CalloutImg>. Pass an <img> or NextJS <Image> component as a child.

import { Button } from "stylus-ui/Button";
import {
  Callout,
  CalloutContent,
  CalloutDescription,
  CalloutImg,
  CalloutTitle,
  CalloutTrigger,
} from "stylus-ui/Callout";

export default () => (
  <Callout>
    <CalloutTrigger asChild>
      <Button variant="secondary">Open Callout</Button>
    </CalloutTrigger>
    <CalloutContent>
      <CalloutImg>
        <img
          src="https://cdn.prod.website-files.com/615f415173b71a5211e28de7/654ac9c921b76a875209ffbe_auto-redact.webp"
          className="w-full"
        />
      </CalloutImg>
      <CalloutTitle title="Callout with image" />
      <CalloutDescription>
        Highlight product features with images.
      </CalloutDescription>
    </CalloutContent>
  </Callout>
);

API Reference

`Callout`

Prop	Type	Default
`defaultOpen`	`boolean`
`modal`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`
`open`	`boolean`

`CalloutContent`

Inherits properties from Radix Popover.Content and HTMLElement.

Prop	Type	Default
`children`	`ReactNode`
`align`	`"start""center""end"`	`"center"`
`alignOffset`	`number`	`0`
`asChild`	`boolean`	`false`
`onCloseAction`	`MouseEventHandler<HTMLButtonElement>`
`portalContainer`	`HTMLElement`
`primaryAction`	`MouseEventHandler<HTMLButtonElement>`
`primaryActionText`	`string`
`secondaryAction`	`MouseEventHandler<HTMLButtonElement>`
`secondaryActionText`	`string`
`showCloseButton`	`boolean`	`false`
`side`	`"top""right""bottom""left"`	`"bottom"`
`sideOffset`	`number`	`10`
`withArrow`	`boolean`	`false`

`CalloutTrigger`

Prop	Type	Default
`asChild`	`boolean`	`false`

`CalloutTitle`

Prop	Type	Default
`title`	`string`
`icon`	`IconDefinition`

`CalloutDescription`

Prop	Type	Default
`children`	`ReactNode`

`CalloutImg`

Prop	Type	Default
`children`	`ReactNode`