CodivDocs

Usage

<Banner variant="info">
  This API is in beta. Breaking changes may happen without notice.
</Banner>

This API is in beta. Breaking changes may happen without notice.

Variants

Three visual styles for different urgency levels.

<Banner variant="info">
  Heads up — we're rolling out a new search modal next week.
</Banner>

<Banner variant="warning">
  Scheduled maintenance: 2026-04-15 02:00–04:00 UTC.
</Banner>

<Banner variant="primary">
  New: AI search is now available on all plans.
</Banner>

Heads up — we're rolling out a new search modal next week.

Scheduled maintenance: 2026-04-15 02:00–04:00 UTC.

New: AI search is now available on all plans.

Dismissible

Set dismissible to add a close button. The dismiss state is local to the page render — it doesn't persist across reloads.

<Banner variant="primary" dismissible>
  Welcome to the new docs! Click around and let us know what you think.
</Banner>

Welcome to the new docs! Click around and let us know what you think.

Differences from the global banner

CodivDocs supports two banner systems:

	Global banner	`<Banner>` MDX component
Source	`codiv.config.json#banner`	Authored inline in MDX
Scope	Every page on the site	One specific page
Position	Very top, above the navbar	Inline within the page body
Use for	Site-wide announcements (e.g. "We're hiring")	Page-local notices ("This API is in beta")

The global banner is for announcements you want every visitor to see. <Banner> is for context-specific notes that only make sense on a single page.

Differences from `<Callout>`

<Banner> is wider and more prominent — it spans the full content width and uses heavier color. <Callout> is a sidebar-style note with a left border accent. Use Banner for announcements, Callout for inline notes.

Props