`Callout` Component

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

Exported from nextra/components.

Props

Name	Type	Default
`type`	`"default" \| "error" \| "info" \| "warning" \| "important" \| null` Defines the style of the callout and determines the default icon if `emoji` is not provided. If set to `null`, no border, background, or text styling will be applied.	`'default'`
`emoji`	`ReactNode` Icon displayed in the callout. Can be a string emoji or a custom React element. Default values based on `type`: `<GitHubTipIcon />` for `type: 'default'` `<GitHubCautionIcon />` for `type: 'error'` `<GitHubNoteIcon />` for `type: 'info'` `<GitHubWarningIcon />` for `type: 'warning'` `<GitHubImportantIcon />` for `type: 'important'`	Determined by `type`
`...props`	`HTMLAttributes<HTMLDivElement>`

Example

A callout is a short piece of text intended to attract attention.

Usage

Default

Helpful advice for doing things better or more easily.


import { Callout } from 'nextra/components'
 
<Callout>Helpful advice for doing things better or more easily.</Callout>

Info

Useful information that users should know, even when skimming content.


import { Callout } from 'nextra/components'
 
<Callout type="info">
  Useful information that users should know, even when skimming content.
</Callout>

Warning

Urgent info that needs immediate user attention to avoid problems.


import { Callout } from 'nextra/components'
 
<Callout type="warning">
  Urgent info that needs immediate user attention to avoid problems.
</Callout>

Error

Advises about risks or negative outcomes of certain actions.


import { Callout } from 'nextra/components'
 
<Callout type="error">
  Advises about risks or negative outcomes of certain actions.
</Callout>

Important

Key information users need to know to achieve their goal.


import { Callout } from 'nextra/components'
 
<Callout type="important">
  Key information users need to know to achieve their goal.
</Callout>

Custom icon

⭐

Nextra has 13k stars on GitHub!


import { Callout } from 'nextra/components'
 
<Callout type="info" emoji="⭐">Nextra has 13k stars on GitHub!</Callout>

Callout Component