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

Framework JavaScript

Block Tools Callout

# Callout block: highlighted notes

A container block for highlighted content with an emoji icon. Supports customisable text and background colours via a colour picker. Child blocks are nested inside the callout. 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.

### 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,
    },
  },
});
```