The Banner component is used for site-wide announcements, promotional messages, or important notifications. It can be configured globally via config.json or used inline within content.
Configure a global banner that appears at the top of every page in your config.json:
The banner message to display.
linkText
string
default: Learn more
Text for the link when href is provided.
Lucide icon name to display before the text.
variant
"default" | "info" | "warning" | "success" | "rainbow" | "subtle"
default: default
The color variant of the banner.
Show a rounded background container around the icon.
Show close button to allow users to dismiss the banner.
Unique ID for localStorage persistence. Required if dismissible is true.
Use the Banner component directly in your MDX content:
This is an important announcement!
<Banner icon="megaphone"> This is an important announcement! </Banner> Default banner with primary colors.
<Banner>Default banner with primary colors.</Banner> Informational message for your users.
<Banner variant="info" icon="info"> Informational message for your users. </Banner> Warning! Please read this carefully.
<Banner variant="warning" icon="alert-triangle"> Warning! Please read this carefully. </Banner> Operation completed successfully!
<Banner variant="success" icon="check-circle"> Operation completed successfully! </Banner> Something exciting is happening!
<Banner variant="rainbow" icon="sparkles"> Something exciting is happening! </Banner> A subtle notification that blends with the content.
<Banner variant="subtle" icon="bell"> A subtle notification that blends with the content. </Banner> New documentation is available!
· Get started <Banner variant="info" icon="rocket" href="/guides/introduction" linkText="Get started" > New documentation is available! </Banner> variant
"default" | "info" | "warning" | "success" | "rainbow" | "subtle"
default: default
The visual style of the banner.
Lucide icon name to display before the text.
Optional URL for the banner link.
linkText
string
default: Learn more
Text for the link when href is provided.
Additional CSS classes to apply.