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.
<Callout emoji='👾'>
**Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
Nishikado.
</Callout>
Info
ℹ️
Today is Friday.
<Callout type='info' emoji='ℹ️'>
Today is Friday.
</Callout>
Warning
⚠️
This API will be deprecated soon.
<Callout type='warning' emoji='⚠️'>
This API will be deprecated soon.
</Callout>
Error
🚫
This is a dangerous feature that can cause everything to explode.
<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