Banner

Be careful, Styledsea docs v99 has released

Using the rainbow variant

Be careful, this banner can be closed

Usage

Put the element at the top of your root layout.

import { Banner } from 'styledsea-docs-interface/components/banner';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <html lang="en">
      <body>
        <Banner>Hello World</Banner>
        {children}
      </body>
    </html>
  );
}

Variant

Change the default variant.

import { Banner } from 'styledsea-docs-interface/components/banner';
 
<Banner variant="rainbow">Hello World</Banner>;

Change Layout

By default, the banner uses a style tag to modify Adalt layouts (e.g. reduce the sidebar height). You can disable it with:

import { Banner } from 'styledsea-docs-interface/components/banner';
 
<Banner changeLayout={false}>Hello World</Banner>;

Close

To allow users to close the banner, give the banner an ID.

import { Banner } from 'styledsea-docs-interface/components/banner';
 
<Banner id="hello-world">Hello World</Banner>;

The state will be automatically persisted.

Usage

Variant

Change Layout

Close

On this page