Banner Component

A built-in component to show a banner on the top of the website. It can be used to show a warning or a notice.

Exported from nextra/components.

Props

Example

Banner key

A banner can be dismissed. By default, it’s used by localStorage  to keep the banner state on the client.

If you have updated your banner text, you should change the key to make sure the banner is shown again. The best practice is to always use a descriptive key for the current text, for example:

import { Layout } from 'my-nextra-theme'
import { Banner } from 'nextra/components'
 
export default function MyLayout({ children, ...props }) {
  return (
    <Layout>
      <Banner storageKey="2.0-release">
        <a href="https://nextra.site" target="_blank">
          🎉 Nextra 2.0 is released. Read more →
        </a>
      </Banner>
      {children}
    </Layout>
  )
}