Skip to Content
🎉 Nextra 4.0 is released. dimaMachina is looking for a new job or consulting.

<Callout> Component

A built-in component to show important information to the reader.

Props

NameTypeDefault
type"default" | "error" | "info" | "warning"

Specifies the type of callout. Determines the default icon if none is provided.

'default'
emojiReactNode

Icon displayed in the callout. Can be a string emoji or a custom React element.

Default values based on type:

  • '💡' for type: 'default'
  • '🚫' for type: 'error'
  • <InformationCircleIcon /> for type: 'info'
  • '⚠️' for type: 'warning'
Determined by `type`
childrenReactNode

Content to be displayed inside the callout.

Example

💡

A callout is a short piece of text intended to attract attention.

A callout is a short piece of text intended to attract attention.

⚠️

A callout is a short piece of text intended to attract attention.

🚫

A callout is a short piece of text intended to attract attention.

Usage

Default

👾

Space Invaders is a 1978 shoot ‘em up arcade game developed by Tomohiro Nishikado.

import { Callout } from 'nextra/components' <Callout emoji="👾"> **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro Nishikado. </Callout>

Info

ℹ️

Today is Friday.

import { Callout } from 'nextra/components' <Callout type="info" emoji="ℹ️"> Today is Friday. </Callout>

Warning

⚠️

This API will be deprecated soon.

import { Callout } from 'nextra/components' <Callout type="warning" emoji="⚠️"> This API will be deprecated soon. </Callout>

Error

🚫

This is a dangerous feature that can cause everything to explode.

import { Callout } from 'nextra/components' <Callout type="error" emoji="️🚫"> This is a dangerous feature that can cause everything to explode. </Callout>
Last updated on