<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:
| Option | Type | Default Value | Description |
|---|---|---|---|
type | 'default' | 'info' | 'warning' | 'error' | 'default' | The type of the callout. |
emoji | string | ReactNode | '💡' for type: 'default''🚫' for type: 'error'for type: 'info''⚠️' for type: 'warning' | The icon to show in the callout. You can also render your custom icon. |
children | ReactNode | The content of the callout. |
Last updated on