Callouts and alerts

Components•4 min read||

Use callouts to highlight important information, warnings, tips, and notes. They draw attention to content that readers should not miss.

Basic callout

<wc-callout type="info" title="Good to know"> DocsLit generates a search index automatically on every build. </wc-callout>

DocsLit generates a search index automatically on every build.

Callout types

Use info callouts for supplementary information that adds context.

Use tip callouts for best practices and recommendations.

Use warning callouts for potential issues the reader should be aware of.

Use error callouts for critical issues that can cause failures.

Use success callouts to confirm that something works as expected.

Use note callouts for general remarks and observations.

Attributes

The visual style of the callout. Options: info, tip, warning, error, success, note.

The heading text displayed at the top of the callout. If omitted, the callout shows only the body content.

Without a title

You can omit the title for a simpler presentation:

<wc-callout type="tip"> Write one idea per sentence. Your readers will thank you. </wc-callout>

Write one idea per sentence. Your readers will thank you.

Markdown inside callouts

Callouts support full Markdown content including bold, italic, lists, links, and code:

<wc-callout type="info" title="Supported Markdown"> You can use: - **Bold** and *italic* text - `inline code` and [links](getting-started/introduction) - Nested lists and other formatting </wc-callout>

You can use:

Bold and italic text
inline code and links
Nested lists and other formatting

Banners

Banners are dismissible notifications that span the full width of the content area. Use them for announcements or temporary notices.

<wc-banner type="info"> DocsLit v0.2 is now available. See the changelog for details. </wc-banner>

DocsLit v0.2 is now available. See the changelog for details.

The visual style. Options: info, warning, error, success, neutral. Defaults to neutral.

Badges

Inline badges for labeling and categorization:

<wc-badge>Default</wc-badge> <wc-badge variant="success">Stable</wc-badge> <wc-badge variant="warning">Beta</wc-badge> <wc-badge variant="danger">Deprecated</wc-badge> <wc-badge variant="info">New</wc-badge> <wc-badge variant="purple">Enterprise</wc-badge>

Default Stable Beta Deprecated New Enterprise

The color scheme. Options: default, success, warning, danger, info, neutral, purple.

When to use each type

Type	Use for
`info`	Supplementary context, prerequisites
`tip`	Best practices, recommendations
`warning`	Potential gotchas, compatibility notes
`error`	Breaking changes, critical requirements
`success`	Confirmed behavior, completed steps
`note`	General remarks, asides

Familiar names

If you're coming from Mintlify or another MDX tool, these PascalCase tag names work directly — DocsLit rewrites them at build time:

MDX-style	Resolves to
`<Note>`	`<wc-callout type="info" title="Note">`
`<Info>`	`<wc-callout type="info" title="Info">`
`<Tip>`	`<wc-callout type="tip" title="Tip">`
`<Warning>`	`<wc-callout type="warning" title="Warning">`
`<Caution>`	`<wc-callout type="warning" title="Caution">`
`<Danger>`	`<wc-callout type="danger" title="Danger">`
`<Check>`	`<wc-callout type="success" title="Check">`
`<Success>`	`<wc-callout type="success" title="Success">`