Chapter 781: <Callout />

Core Idea

_Part of the @remotion/shapes package.

Key Concepts

• Explorer
• Example
• Props
• See also

Code Examples

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Callout
        width={500}
        height={200}
        pointerLength={40}
        pointerBaseWidth={60}
        pointerDirection="down"
        cornerRadius={20}
        fill="#20232a"
      />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for <Callout /> from the official docs.

Key Takeaways

1. Understand explorer when working with <Callout />.
2. Understand example when working with <Callout />.
3. Understand props when working with <Callout />.
4. Understand see also when working with <Callout />.

Connects To

• Arrow: related page in the Shapes (@remotion/shapes) section.
• Circle: related page in the Shapes (@remotion/shapes) section.
• Ellipse: related page in the Shapes (@remotion/shapes) section.