React Banner - Flowbite

The banner component can be used to show extra information or enable interactions with the user without affecting the main content area of the website.

Table of Contents#

Default banner#

Use this example of a dismissable banner component to show extra information relative to the main content area of the page based on a sticky positition.

Edit on GitHub

Supercharge your hiring by taking advantage of our 

limited-time sale

 for Designer Search + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

  • React TypeScript
'use client';

import { Banner } from 'flowbite-react';
import { HiX } from 'react-icons/hi';

export default function DefaultBanner() {
  return (
    <Banner>
      <div className="fixed z-50 flex w-full items-start justify-between gap-8 border border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800 sm:items-center lg:py-4">
        <p className="text-sm font-light text-gray-500 dark:text-gray-400">
          Supercharge your hiring by taking advantage of our&nbsp;
          <a className="font-medium text-primary-600 underline hover:no-underline dark:text-primary-500" href="#">
            limited-time sale
          </a>
          &nbsp;for Designer Search + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job
          board.
        </p>
        <Banner.CollapseButton>
          <HiX />
        </Banner.CollapseButton>
      </div>
    </Banner>
  )
}

Informational banner#

This example can be used to show informational context such as upcoming maintenance of the website positioned to the top side of the page.

Edit on GitHub

Flowbite will no longer process new data in standard properties beginning  July 1, 2023. Prepare now by setting up and switching over to a Flowbite 4 property.

Learn more

Let's go
  • React TypeScript
'use client';

import { Banner } from 'flowbite-react';
import { Button } from 'flowbite-react';
import { HiInformationCircle } from 'react-icons/hi';

export default function InformationalBanner() {
  return (
    <Banner>
      <div className="fixed z-50 flex w-full flex-col items-start justify-between border border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800 md:flex-row md:items-center md:gap-8 lg:py-4">
        <div className="sm:flex xl:items-center">
          <HiInformationCircle />
          <p className="mb-4 text-sm text-gray-500 dark:text-gray-300 md:mb-0">
            Flowbite will no longer process new data in standard properties beginning&nbsp;
            <span className="font-medium text-gray-900 dark:text-white">July 1, 2023</span>. Prepare now by setting up and
            switching over to a Flowbite 4 property.
          </p>
        </div>
        <div className="flex shrink-0 items-center space-x-4 lg:pl-10">
          <Banner.CollapseButton>Dismiss</Banner.CollapseButton>
          <a href="#" className="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">
            Learn more
          </a>
          <Button href="#">Let's go</Button>
        </div>
      </div>
    </Banner>
  )
}

Announcement banner#

Use this example of a banner component to announce new features or changes to the website including a badge, description text and CTA link.

Edit on GitHub
New

We have launched Flowbite Blocks including over 120+ website sections!

Check it out!

  • React TypeScript
'use client';

import { Banner } from 'flowbite-react';
import { Badge } from 'flowbite-react';
import { HiArrowRight, HiX } from 'react-icons/hi';

export default function AnnouncementBanner() {
  return (
    <Banner>
      <div className="fixed z-50 flex w-full justify-between border border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800">
        <div className="mx-auto flex items-center">
          <Badge>New</Badge>
          <p className="text-sm font-medium text-gray-900 dark:text-white md:my-0">
            We have launched Flowbite Blocks including over 120+ website sections!
            <a
              href="#"
              className="ml-0 inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-500 md:ml-2"
            >
              Check it out
              <HiArrowRight />
            </a>
          </p>
        </div>
        <Banner.CollapseButton>
          <HiX />
        </Banner.CollapseButton>
      </div>
    </Banner>
  )
}

Launch banner#

This example can be used if you launched a new feature or product on your website by providing the logo and a CTA link.

Edit on GitHub
  • React TypeScript
'use client';

import { Banner } from 'flowbite-react';
import { HiExternalLink, HiX } from 'react-icons/hi';

export default function LaunchBanner() {
  return (
    <Banner>
      <div className="fixed z-50 flex w-full justify-between border border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800 lg:py-4">
        <div className="flex items-center md:mx-auto">
          <a href="#" className="mr-3 hidden items-center text-xl font-semibold text-gray-900 dark:text-white sm:flex">
            <img alt="" src="https://flowbite.com/docs/images/logo.svg" />
            Flowbite
          </a>
          <a href="#" className="flex items-center text-sm text-primary-600 hover:underline dark:text-primary-500">
            We launched Marketing UI Blocks
            <HiExternalLink />
          </a>
        </div>
        <Banner.CollapseButton>
          <HiX />
        </Banner.CollapseButton>
      </div>
    </Banner>
  )
}

CTA banner#

Get started with this example of a banner component to also show a CTA button such as booking a call or signing up for a demo of a product.

Edit on GitHub

I hope you enjoyed reading this post.

If you want my team at Flowbite Digital to help you get more traffic, just book a call.

Book a call

  • React TypeScript
'use client';

import { Banner } from 'flowbite-react';
import { HiCalendar, HiX } from 'react-icons/hi';

export default function CTABanner() {
  return (
    <Banner>
      <div className="fixed z-50 grid w-full border border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800 sm:grid-cols-3">
        <div className="mb-3 pr-6 sm:col-span-2 sm:mb-0 sm:pr-0">
          <p className="mb-1 font-bold text-gray-900 dark:text-white">
            I hope you enjoyed reading this post.
          </p>
          <p className="text-sm font-light text-gray-500 dark:text-gray-400">
            <p>
              If you want my team at Flowbite Digital to help you get more traffic, just book a call.
            </p>
          </p>
        </div>
        <div className="flex justify-start sm:justify-end">
          <div className="flex items-center sm:space-x-4">
            <a
              className="flex items-center rounded-lg bg-primary-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto"
              href="#"
            >
              <HiCalendar />
              <p>
                Book a call
              </p>
            </a>
            <Banner.CollapseButton>
              <HiX />
            </Banner.CollapseButton>
          </div>
        </div>
      </div>
    </Banner>
  )
}

Theme#

This component is a work in progress, and currently doesn't have a theme. It may in future updates.

To learn more about how to customize the appearance of components, please see the Theme docs.

References#