Banner

The RhBanner component presents a noticeable message and associated actions, which can be optional.

Usage

Once installed, you can import the RhBanner component into your React application:

copy
import {RhBanner} from "@rhythm-ui/react"

Then, you can use the RhBanner component in your JSX code:

Type

The type prop is used to specify the style of the banner, and it can take one of three values fixed, floating, or bubble.

copy
function Banner() {
  const [type, setType] = useState("fixed");
  const [isType, setisType] = useState(false);

  return (
    <div>
      <div className="flex gap-4 items-center justify-center ">
        <RhButton
          onClick={() => {
            setisType(true);
            setType("fixed");
          }}
          variant="primary"
        >
          Show Fixed
        </RhButton>
        <RhButton
          onClick={() => {
            setisType(true);
            setType("floating");
          }}
          variant="primary"
        >
          Show Floating
        </RhButton>
        <RhButton
          onClick={() => {
            setisType(true);
            setType("bubble");
          }}
          variant="primary"
        >
          Show Bubble
        </RhButton>
      </div>
      {isType && (
        <>
          <RhBanner position="bottom" type={type} variant="secondary">
            <div className="flex gap-2 justify-between items-center px-4 text-white">
              <p>
                Lorem ipsum dolor, sit amet consectetur &nbsp;
                <a className="underline" href="#">
                  Learn More
                </a>
              </p>
              <div
                className="flex items-center cursor-pointer"
                onClick={() => setisType(false)}
              >
                <RhIcon className="text-2xl" icon="heroicons:x-mark-solid" />
              </div>
            </div>
          </RhBanner>
        </>
      )}
    </div>
  );
}

Banner Props

type"fixed" | "floating" | "bubble"fixedSpecify the style of the banner you select from available options
position"top" | "bottom"topSet the position of the banner either at the top or bottom of the viewport
variant"primary" | "secondary" | "success" | "warning" | "danger" | "white"primarySet Variants for each banner

Variant

The variant prop is used to set a variant for the banner.

copy
function FloatingBanner() {
  const [variant, setVariant] = useState("primary");
  const [showVariant, setShowVariant] = useState(false);
  return (
    <div>
      <div className="flex gap-4 items-center justify-center ">
        <RhButton
          onClick={() => {
            setShowVariant(true);
            setVariant("primary");
          }}
          variant="primary"
        >
          Show Primary
        </RhButton>
        <RhButton
          onClick={() => {
            setShowVariant(true);
            setVariant("secondary");
          }}
          variant="secondary"
        >
          Show secondary
        </RhButton>
        <RhButton
          onClick={() => {
            setShowVariant(true);
            setVariant("success");
          }}
          variant="success"
        >
          Show success
        </RhButton>
        <RhButton
          onClick={() => {
            setShowVariant(true);
            setVariant("warning");
          }}
          variant="warning"
        >
          Show warning
        </RhButton>
      </div>
      {showVariant && (
        <>
          <RhBanner position="bottom" type="bubble" variant={variant}>
            <div className="flex gap-2 justify-between items-center px-4 text-white">
              <p>
                Lorem ipsum dolor, sit amet consectetur &nbsp;
                <a className="underline" href="#">
                  Learn More
                </a>
              </p>
              <div
                className="flex items-center cursor-pointer"
                onClick={() => setShowVariant(false)}
              >
                <RhIcon className="text-2xl" icon="heroicons:x-mark-solid" />
              </div>
            </div>
          </RhBanner>
        </>
      )}
    </div>
  );
}