Banner

Usage

To display a banner, pass a title and an optional description.

Congrats on being one of our top creators!

Set up your community profile now to build your audience.

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

export default () => (
  <Banner
    title="Congrats on being one of our top creators!"
    description="Set up your community profile now to build your audience."
    icon={faTrophy}
  />
);

Colors

Display different colors using the variant prop. Variants other than default come with their own preset icon.

You have created 25 of the 100 allowed documents on your Basic plan.

You have created 80 of the 100 allowed documents on your Basic plan.

Upgrade to Pro for unlimited documents.

You have created 85 of the 100 allowed documents on your Basic plan.

Upgrade to Pro for unlimited documents.

You have reached the 100 document limit on your Basic plan.

Upgrade to Pro to continue creating documents.

Welcome to Pro! You now have unlimited documents.

Enjoy creating without limits on your new Pro plan.

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

export default () => (
  <div className="flex w-full flex-col gap-2">
    <Banner
      title="You have created 25 of the 100 allowed documents on your Basic plan."
      variant="default"
    />
    <Banner
      title="You have created 80 of the 100 allowed documents on your Basic plan."
      description="Upgrade to Pro for unlimited documents."
      variant="info"
    />
    <Banner
      title="You have created 85 of the 100 allowed documents on your Basic plan."
      description="Upgrade to Pro for unlimited documents."
      variant="warning"
    />
    <Banner
      title="You have reached the 100 document limit on your Basic plan."
      description="Upgrade to Pro to continue creating documents."
      variant="error"
    />
    <Banner
      title="Welcome to Pro! You now have unlimited documents."
      description="Enjoy creating without limits on your new Pro plan."
      variant="success"
    />
  </div>
);

Icon

All variants other than default display a default icon. However, the default icon can be overridden. Import an icon from Font Awesome and pass it to icon.

An unknown error occurred.

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

export default () => (
  <Banner title="An unknown error occurred." icon={faAlien} />
);

Actions

To render buttons beneath the description, pass an array of ButtonProps to the actions prop.

There was an error connecting to Confluence.

Please try again. If the issue persists, you can reconnect manually.

ReconnectDismiss

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

export default () => (
  <Banner
    title="There was an error connecting to Confluence."
    description="Please try again. If the issue persists, you can reconnect manually."
    variant="warning"
    actions={[
      { children: "Reconnect", onClick: () => {} },
      { children: "Dismiss", onClick: () => {} },
    ]}
  />
);

Lists

If you need to display a list of items—for example, a list of errors—pass an array of strings to descriptionList.

We couldn't submit your form.

Please fix the following errors and try again:

• Title is required
• Description is required
• Date is required

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

export default () => (
  <Banner
    title="We couldn't submit your form."
    description="Please fix the following errors and try again:"
    descriptionList={[
      "Title is required",
      "Description is required",
      "Date is required",
    ]}
    variant="error"
  />
);

Sizing

Banner will automatically adjust its layout based on its width.

• Beneath 384px wide: padding and text shrink for mobile
• Beneath 576px wide: buttons wrap to stack beneath text (otherwise top right)
• When space is available: wraps title and description to a single line

Example available on wider screens

Condensed

Default

There was an error connecting to Confluence.

Please try again.

Reconnect

Drag to resize 👆

Announce presence

When rendering this component dynamically in response to a user action, pass role="alert". Contents will be automatically announced to users with screen readers.

Accessibility

Use role="alert" sparingly. When rendered, it announces its presence to users with screen readers. From the MDN Web Docs:

Because of its intrusive nature, the banner role must be used sparingly and only in situations where the user’s immediate attention is required.

Couldn't log in.

Please try again. If the issue persists, you can reconnect manually.

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

export default () => (
  <Banner
    title="Couldn't log in."
    description="Please try again. If the issue persists, you can reconnect manually."
    variant="error"
    role="alert"
  />
);

Dismiss

An Banner can be made dismissible by passing an onDismiss handler. A close icon will appear in the top right of the banner.

Congrats on being one of our Top Creators!

import { Banner } from "stylus-ui/Banner";
import { Button } from "stylus-ui/Button";
import { faTrophy } from "@fortawesome/pro-regular-svg-icons";
import { useState } from "react";

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

  return isOpen ? (
    <Banner
      title="Congrats on being one of our Top Creators!"
      icon={faTrophy}
      onDismiss={handleDismiss}
    />
  ) : (
    <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 1

Visible by default

Banner 2

Visible by default

Banner 3

Visible by default

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

export default () => {
  const maxBanners = 3;
  const totalBanners = 5;
  const [openBanners, setOpenBanners] = useState(new Set([1, 2, 3, 4, 5]));

  const handleDismiss = (id) =>
    setOpenBanners((prev) => new Set([...prev].filter((b) => b !== id)));
  const handleResetAll = () =>
    setOpenBanners(
      new Set(Array.from({ length: totalBanners }, (_, i) => i + 1)),
    );

  const allUndismissedBanners = [...openBanners].map((id) => (
    <Banner
      key={id}
      title={`Banner ${id}`}
      description={id > maxBanners ? "Hidden by default" : "Visible by default"}
      onDismiss={() => handleDismiss(id)}
    />
  ));

  return allUndismissedBanners.length ? (
    <BannerGroup max={maxBanners}>{allUndismissedBanners}</BannerGroup>
  ) : (
    <Button variant="secondary" onClick={handleResetAll}>
      Reset
    </Button>
  );
};

API Reference

Banner

Inherits properties from HTMLElement.

Prop	Type	Default
title	string
actions	ButtonProps[]
description	string
descriptionList	string[]
icon	IconDefinition
onDismiss	() => void
role	"alert""region"	"region"
theme	"light""dark"	"light"
variant	"default""info""success""warning""error"	"default"

BannerGroup

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
className	string
max	number	2