Banner

Usage

To display a banner, wrap text in a <Banner>.

This is a banner. Use it for attention-grabbing messages.

import { Banner } from "stylus-ui/Banner";

export default () => (
  <Banner>This is a banner. Use it for attention-grabbing messages.</Banner>
);

Colors

Banners come in four variants: dark (default), light, transparent, and destructive.

This is a dark banner.

This is a light banner.

This is a transparent banner.

This is a destructive banner.

import { Banner } from "stylus-ui/Banner";

export default () => (
  <div className="flex w-full flex-col gap-2">
    <Banner variant="dark">This is a dark banner.</Banner>
    <Banner variant="light">This is a light banner.</Banner>
    <Banner variant="transparent">This is a transparent banner.</Banner>
    <Banner variant="destructive">This is a destructive banner.</Banner>
  </div>
);

Icons

Banners can display an icon imported from FontAwesome. First import the icon, then pass it to the icon prop.

A dark banner with an icon.

import { Banner } from "stylus-ui/Banner";
import { faMegaphone } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Banner icon={faMegaphone}>A dark banner with an icon.</Banner>
);

Buttons

Banners can include a call-to-action (CTA) button. Pass in ctaButtonText and onCTAButtonClick.

Sign in to access this page.

Sign In

import { Banner } from "stylus-ui/Banner";
import { useToast } from "stylus-ui/Toast";

export default () => {
  const { toast } = useToast();
  const handleButtonClick = () => toast({ title: "You clicked Sign In!" });

  return (
    <Banner ctaButtonText="Sign In" onCTAButtonClick={handleButtonClick}>
      Sign in to access this page.
    </Banner>
  );
};

Dismissible

To allow banners to be dismissed, pass in onClose and set showClose to true.

Our terms and conditions have changed.

import { Banner } from "stylus-ui/Banner";
import { Button } from "stylus-ui/Button";
import { useState } from "react";

export default () => {
  const [isOpen, setIsOpen] = useState(true);
  const handleClose = () => setIsOpen(false);
  const handleReset = () => setIsOpen(true);

  return isOpen ? (
    <Banner onClose={handleClose} showClose>
      Our terms and conditions have changed.
    </Banner>
  ) : (
    <Button variant="secondary" onClick={handleReset}>
      Reset
    </Button>
  );
};

Groups

To group banners, import BannerGroup. By default, the group will only display the first two banners. To show additional banners, increment max.

Banner One

Banner Two

Banner Three

import { Banner } from "stylus-ui/Banner";
import { BannerGroup } from "stylus-ui/BannerGroup";

export default () => (
  <BannerGroup max={3}>
    <Banner>Banner One</Banner>
    <Banner>Banner Two</Banner>
    <Banner>Banner Three</Banner>
    <Banner>Banner Four - I'm hidden!</Banner>
  </BannerGroup>
);

API Reference

Banner

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
childrenClassName	string
className	string
ctaButtonText	string
icon	IconProp
iconClassName	string
onClose	() => void
onCTAButtonClick	() => void
showClose	boolean	false
variant	"dark""light""transparent""destructive"	"dark"
withIcon	boolean	true

BannerGroup

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
className	string
max	number	2