Banner

For isolated previews, theme switching, and sandbox editing, open the Banner playground on holydocs.com .

When to use

Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Info

Standard informational announcement.

mdx
<Banner variant="info">This API version will be sunset on March 1, 2025. Please migrate to v2.</Banner>

Warning

Urgent deprecation or breaking-change notice.

mdx
<Banner variant="warning">Breaking change: the `user.name` field has been renamed to `user.displayName`.</Banner>

Success

Positive status announcement.

mdx
<Banner variant="success">v2.0 is now generally available! See the migration guide for details.</Banner>

New Feature

Highlight a new feature or capability.

mdx
<Banner variant="new">New: AI-powered search is now available on all paid plans.</Banner>

Props

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<Banner variant="info">This API version will be sunset on March 1, 2025. Please migrate to v2.</Banner>

Tips

• Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
• Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
• Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.

Related Components

More

• Interactive playground: Banner on holydocs.com
• Component library index: /components