Skip to Content
Nextra 4.0 is released. Read more

Callout Component

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

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>

API

The Callout component takes the following props:

type (optional)

The type of the Callout.

  • Type: 'default' | 'info' | 'warning' | 'error'
  • Default: 'default'

emoji (optional)

The icon to show in the Callout. You can also show your custom icon using this prop.

  • Type: string | ReactNode
  • Default: '💡'

children

The content of the Callout.

  • Type: ReactNode
Last updated on