Callout
Highlight important information with a callout
A callout is a short piece of text intended to attract attention.
import { Callout } from "@visulima/nextra-theme-docs/components";<Callout>A **callout** is a short piece of text intended to attract attention.</Callout>
A callout is a short piece of text intended to attract attention.
import { Callout } from "@visulima/nextra-theme-docs/components";<Callout type="check">A **callout** is a short piece of text intended to attract attention.</Callout>
A callout is a short piece of text intended to attract attention.
import { Callout } from "@visulima/nextra-theme-docs/components";<Callout type="tip">A **callout** is a short piece of text intended to attract attention.</Callout>
A callout is a short piece of text intended to attract attention.
import { Callout } from "@visulima/nextra-theme-docs/components";<Callout type="info">A **callout** is a short piece of text intended to attract attention.</Callout>
A callout is a short piece of text intended to attract attention.
import { Callout } from "@visulima/nextra-theme-docs/components";<Callout type="warning">A **callout** is a short piece of text intended to attract attention.</Callout>
A callout is a short piece of text intended to attract attention.
import { Callout } from "@visulima/nextra-theme-docs/components";<Callout type="error">A **callout** is a short piece of text intended to attract attention.</Callout>
APIPermalink for this section
The Callout component takes the following props:
type (optional)Permalink for this section
The type of the Callout.
- Type:
'default' | 'info' | 'warning' | 'error' | 'tip' | 'check' - Default:
'default'
icon (optional)Permalink for this section
The icon to show in the Callout. You can also show your custom icon using this prop.
- Type:
ReactNode - Default:
null
children (optional)Permalink for this section
The content of the Callout.
- Type:
ReactNode - Default:
null