Ask Claude CodeAsk Codex

Banner

An inline notice: an icon, a message, and an optional action, such as "The 24-hour reply window has closed". For a passing confirmation, use a toast (planned).

Installation

bun add @harmo-ui/css @harmo-ui/react

Usage

import { Banner, Button } from "@harmo-ui/react";
import { WarningIcon } from "./icons";

<Banner
  status="warning"
  icon={<WarningIcon />}
  action={
    <Button variant="secondary" size="small">
      Send template
    </Button>
  }
>
  The 24-hour reply window has closed. Send a template to reply.
</Banner>

Examples

This site is using your theme

Statuses

data-status colors the icon. info is the default, so the first banner leaves it out. Any SVG drawn in currentColor takes the color.

Translation settings apply to new conversations only.

Your WhatsApp number is connected and ready to send.

Your message quality is low. Fewer people will receive your campaigns.

We couldn't reach WhatsApp. Check the connection in your business settings.

<>
  <Banner icon={<InfoIcon />}>
    Translation settings apply to new conversations only.
  </Banner>
  <Banner status="success" icon={<SuccessIcon />}>
    Your WhatsApp number is connected and ready to send.
  </Banner>
  <Banner status="warning" icon={<WarningIcon />}>
    Your message quality is low. Fewer people will receive your campaigns.
  </Banner>
  <Banner status="error" icon={<ErrorIcon />}>
    We couldn't reach WhatsApp. Check the connection in your business
    settings.
  </Banner>
</>

With an action

The action is a small secondary Button. Inside a banner, hovering fills its background instead of darkening its border.

The 24-hour reply window has closed. Send a template to reply.

<Banner
  status="warning"
  icon={<WarningIcon />}
  action={
    <Button variant="secondary" size="small">
      Send template
    </Button>
  }
>
  The 24-hour reply window has closed. Send a template to reply.
</Banner>

Added after the page loads

The banners above are on the page from the start, so they have no role. One shown later must announce itself: role="alert" when it's urgent, as here, or role="status" when it can wait. Keep it in the page with hidden and remove that to show it. Press Send message.

const [failed, setFailed] = useState(false);
const send = () => {
  setFailed(false);
  setTimeout(() => setFailed(true), 100);
};

return (
  <>
    <div>
      <Button variant="secondary" onClick={send}>
        Send message
      </Button>
    </div>
    <Banner
      status="error"
      icon={<ErrorIcon />}
      role="alert"
      id="send-error"
      hidden={!failed}
    >
      The message wasn't sent. Check your connection and try again.
    </Banner>
  </>
);

Long message

In a narrow container, drawn dashed here, the message wraps and the icon and action keep their size.

The 24-hour reply window has closed. Send a template to reply.

<Banner
  status="warning"
  icon={<WarningIcon />}
  action={
    <Button variant="secondary" size="small">
      Send template
    </Button>
  }
>
  The 24-hour reply window has closed. Send a template to reply.
</Banner>

API reference

React

<Banner> renders the banner, with its children as the message. Other props are the <div>'s attributes, such as role="alert" for a banner shown after the page loads.

PropEffect
iconThe icon, as an element, such as <WarningIcon /> from your app; Banner adds .hbanner-icon to its className and hides it from screen readers
statussuccess, warning, info, or error; info when left out
actionPlaced after the message, such as a small secondary <Button>

HTML

A <div class="hbanner"> holding an .hbanner-icon, with aria-hidden="true" and focusable="false", a .hbanner-message, and optionally a small secondary Button. Draw the icon with fill="currentColor" or stroke="currentColor"; the banner colors it. Load banner.css; button.css for an action. It needs no script.

HookEffect
data-status="info", or noneIcon in --harmo-status-color-info
data-status="success"Icon in --harmo-status-color-success
data-status="warning"Icon in --harmo-status-color-warning
data-status="error"Icon in --harmo-status-color-error
A direct .hbutton with data-variant="secondary"The action; on hover its background fills and its border stays put
hiddenHides the banner

See Banner's full contract.

Accessibility

A banner present when the page loads needs no role. One added later announces itself: role="status" when it can wait for the current speech, role="alert" when it's urgent, such as an error that blocks the task.