Callout Component
A built-in component of the Docs Theme 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-theme-docs'
 
<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-theme-docs'
 
<Callout type="info" emoji="ℹ️">
  Today is Friday.
</Callout>Warning
⚠️
This API will be deprecated soon.
import { Callout } from 'nextra-theme-docs'
 
<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-theme-docs'
 
<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: ReactNode
- Default: '💡'
children (optional)
The content of the Callout.
- Type: ReactNode
- Default: null
Last updated on September 12, 2022