Callout Block

The Callout block is used to emphasize content that needs attention. It's typically displayed with an icon and a colored background to make it visually stand out.

Data Structure

The Notion API data structure for a Callout block is as follows:

{
  "type": "callout",
  "callout": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a callout",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a callout",
        "href": null
      }
    ],
    "icon": {
      "type": "emoji",
      "emoji": "💡"
    },
    "color": "gray_background"
  }
}

• rich_text: An array containing the text content and style information of the callout.
• icon: Information about the icon to be displayed with the callout. It can be an emoji or an external image URL.
• color: Specifies the background color of the callout.

React Component

The component that renders the Callout block in Notionpresso is as follows:

import React from "react";
import type { CalloutArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
import Icon from "./internal/icon";


type CalloutProps = {
children?: React.ReactNode;
} & CalloutArgs;




const Callout: React.FC<CalloutProps> = ({ children, ...props }) => {
const { callout } = props;




return (
<div
className={notion-block notion-callout ${getColorCss(callout.color)}}
>
<div className="notion-callout-content">
<div className="notion-callout-icon" aria-hidden="true">
<Icon icon={callout.icon} />
</div>
<div className="notion-callout-text">
<RichText props={callout.rich_text} />
</div>
</div>
{children}
</div>
);
};




export default Callout;
export default Callout;

Usage Example

Here's an example of how to use the Callout block:

import { Notion } from "@notionpresso/react";


function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
function MyNotionPage({ blocks }) {
return (
<Notion>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}

Here, blocks is an array of block data received from the Notion API.

Icon Handling

The icon for the Callout block is handled through the Icon component. This component supports both emojis and external image URLs. It selects the appropriate rendering method based on the icon type.

Styling

The style of the Callout block can be customized through the following CSS classes:

• .notion-block: Basic style applied to all Notion blocks
• .notion-callout: Specific style for Callout blocks
• .notion-callout-content: Style for the content of the callout
• .notion-callout-icon: Style for the callout icon
• .notion-callout-text: Style for the callout text

If additional styling is needed, you can write CSS targeting these classes. For example:

.notion-callout {
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
}


.notion-callout-icon {
margin-right: 12px;
font-size: 24px;
}




.notion-callout-text {
flex: 1;
}
.notion-callout-text {
flex: 1;
}

Color Handling

The color property of the Callout determines the background color. The getColorCss utility function is used to generate the appropriate CSS class. This function converts Notion's color names into CSS classes.

Nesting Support

Callout blocks can contain other blocks. This is handled through the children prop. For example, you can include lists or other text blocks within a callout.

Notes

• Callout blocks are effective for emphasizing important information or warnings. However, excessive use can be distracting, so they should be used appropriately.
• Make sure the combination of icon and background color meets accessibility standards. In particular, maintain sufficient contrast between text and background.
• It's good practice to provide appropriate alternative text for icons to support screen reader users.