Banner

A full-width element used to draw attention to a message.

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.

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

const handleButtonClick = () => alert("You clicked Sign In!");

export default () => (
  <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`