Skip to main content

Configuration

OptionTypeDefaultDescription
contentstringrequiredBanner content. Plain text or HTML.
dismissiblebooleantrueWhether users can dismiss the banner.
backgroundColorstring'#3b82f6'Background color.
textColorstring'#ffffff'Text color.
showCloseIconbooleantrueShow the × button. Only applies when dismissible: true.
linkColorstring'#ffffff'Color for <a> tags inside content.
linkUnderlinebooleantrueWhether links are underlined.
classNamestringExtra CSS class on the banner wrapper.
storageKeystring'docusaurus-banner-dismissed'localStorage key for persisted dismissal.
idstringUnique banner ID. Required when running multiple banner instances.

Non-dismissable banner

[
'docusaurus-plugin-banner',
{
content: 'Scheduled maintenance Friday 8pm–10pm UTC.',
dismissible: false,
},
];
[
'docusaurus-plugin-banner',
{
content:
'<strong>Alert:</strong> Read about our <a href="/blog/2024/01/01/update">latest release</a>.',
backgroundColor: '#ef4444',
linkColor: '#fef08a',
linkUnderline: true,
},
];

TypeScript

import type { BannerPluginOptions } from 'docusaurus-plugin-banner';

const options: BannerPluginOptions = {
content: 'Hello from TS',
dismissible: true,
};