---
title: "Callout Block — Highlighted Notes and Tips"
description: "Highlighted note blocks with an icon and a colour preset, for warnings, tips, and asides inside a document."
source: https://blokeditor.com/docs/callout/
lastmod: 2026-09-25
---

Framework JavaScript

Block Tools Callout

# Callout block: highlighted notes

A container block for highlighted content with an emoji icon. It supports customisable text and background colours via a colour picker. In the emoji picker, category buttons show their names after a brief hover or on keyboard focus.

Child blocks are nested inside the callout. It is useful for tips, warnings, notes, and other call-to-action content.

Enter adds a line inside the panel. Pressing it again on the empty last line leaves the callout, so the blank line becomes the paragraph below instead of padding the panel out.

The picker loads its emoji list only when first needed. Editable callouts start that load on their own once the page is idle. To have it ready earlier, call `preloadEmojiData(locale)` from `@bloklabs/core/tools`, for example after login: `preloadEmojiData('ru')`.

The locale is optional and defaults to `'en'`. Calling it more than once is safe. You don't need it if you pass your own `emojiPicker`.

### Import

TypeScript

```
import { Callout } from '@bloklabs/core/tools';
```

### Configuration

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `emojiPicker` | `(onSelect: (emoji: string) => void) => void` | `undefined` | Custom emoji picker handler that replaces the built-in picker. Call `onSelect` with the chosen emoji, or "" to clear. |

### Save Data

TypeScript

```
interface CalloutData {
  emoji: string;             // Emoji character (e.g. "💡")
  textColor: string | null;  // Colour preset name, or null for default
  backgroundColor: string | null; // Colour preset name, or null for default
}
```

JSON

```
{
  "id": "pqr678",
  "type": "callout",
  "data": {
    "emoji": "💡",
    "textColor": null,
    "backgroundColor": "yellow"
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Callout } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    callout: {
      class: Callout,
    },
  },
});
```