---
title: Callout
docs:
  - route: https://pro.platejs.org/docs/components/callout-element
    title: Callout Element
---

<PackageInfo>

## Features

- Customizable callout blocks for highlighting important information
- Support for different callout variants (e.g., info, warning, error)
- Ability to set custom icons or emojis for callouts

</PackageInfo>

## Installation


```bash
npm install @udecode/plate-callout
```

## Usage

```tsx
import { CalloutPlugin } from '@udecode/plate-callout/react';
```

```tsx
const plugins = [
  // ...otherPlugins,
  CalloutPlugin,
]
```

```tsx
const components = {
  // ...otherComponents,
  [CalloutPlugin.key]: CalloutElement,
}
```

- [CalloutElement](https://pro.platejs.org/docs/components/callout-element) (Plus)

## Examples

### Plate UI

Work in progress.

### Plate Plus

<ComponentPreviewPro name="callout-pro" />

## Plugins

### CalloutPlugin

Callout element plugin.

## Transforms

### editor.tf.insert.callout

Inserts a callout element into the editor.

<APIParameters>
  <APIItem name="editor" type="SlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="options" type="object" optional>
    Options for inserting the callout.
    <APISubList>
      <APISubListItem parent="options" name="variant" type="string" optional>
        The variant of the callout to insert.
      </APISubListItem>
      <APISubListItem parent="options" name="...InsertNodesOptions" type="InsertNodesOptions<E>">
        Other options from `InsertNodesOptions`.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIParameters>

## Hooks

### useCalloutEmojiPicker

This hook manages the emoji picker functionality for callouts.

<APIParameters>
  <APIItem name="options" type="UseCalloutEmojiPickerOptions">
    Options for the callout emoji picker.
    <APISubList>
      <APISubListItem parent="options" name="isOpen" type="boolean">
        Whether the emoji picker is open.
      </APISubListItem>
      <APISubListItem parent="options" name="setIsOpen" type="(isOpen: boolean) => void">
        Function to set the open state of the emoji picker.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIParameters>

<APIReturns>
  <APIItem name="emojiToolbarDropdownProps" type="object">
    Props for the emoji toolbar dropdown.
    <APISubList>
      <APISubListItem parent="emojiToolbarDropdownProps" name="isOpen" type="boolean">
        Whether the emoji picker is open.
      </APISubListItem>
      <APISubListItem parent="emojiToolbarDropdownProps" name="setIsOpen" type="(v: boolean) => void">
        Function to set the open state of the emoji picker, respecting read-only mode.
      </APISubListItem>
    </APISubList>
  </APIItem>
  <APIItem name="props" type="object">
    Props for the emoji picker component.
    <APISubList>
      <APISubListItem parent="props" name="isOpen" type="boolean">
        Whether the emoji picker is open.
      </APISubListItem>
      <APISubListItem parent="props" name="setIsOpen" type="(isOpen: boolean) => void">
        Function to set the open state of the emoji picker.
      </APISubListItem>
      <APISubListItem parent="props" name="onSelectEmoji" type="(options: { emojiValue?: any; icon?: any }) => void">
        Function called when an emoji is selected. It updates the callout's icon and closes the picker.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>

## Types

### TCalloutElement

```typescript
interface TCalloutElement extends TElement {
  variant?: string;
  icon?: string;
}
```
