Callout

Usage

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

Open Callout

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>
);

Title icon

You can pass a FontAwesome icon into <CalloutTitle>.

Open Callout

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 FontAwesome 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>.

Open Callout

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>.

Open Callout

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>.

Open Callout

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.

Open Callout

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