Callout

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