Info Banner

<InfoBanner role="note" className="max-w-md">
  Showing alerts from the last 30 days. Older alerts are in the archive.
</InfoBanner>

Usage

import { InfoBanner } from "@zenoxai/ui/patterns/info-banner"

export function RetentionNote() {
  return (
    <InfoBanner role="note">
      Showing alerts from the last 30 days. Older alerts are in the archive.
    </InfoBanner>
  )
}

Put an info banner directly above the list, table or form it is about, to say something the user should know before acting on it: the result is partial, the data is delayed, the feature is in preview. One sentence, no title.

Info Banner or Alert

InfoBanner is an Alert with a fixed layout: an icon and one line of text, centered vertically. Choose by the shape of the message:

If the banner grows a second sentence that explains what to do, it has become an alert: compose Alert, AlertTitle and AlertDescription instead.

Tones

tone takes the Alert variants and defaults to info. Use warning and destructive only when the note changes what the user can trust or do, such as delayed data or a disabled export.

<div className="grid w-full max-w-md gap-3">
  <InfoBanner>Results include 2 of 3 tenants you can access.</InfoBanner>
  <InfoBanner tone="success">
    All connectors reported in the last hour.
  </InfoBanner>
  <InfoBanner tone="warning">
    The CrowdStrike sync is delayed. Data may be 20 minutes old.
  </InfoBanner>
  <InfoBanner tone="neutral">
    This report is a snapshot from October 1 and does not update.
  </InfoBanner>
  <InfoBanner tone="destructive">
    Exports are disabled until the storage quota is raised.
  </InfoBanner>
</div>

Icon

The banner shows an Info icon by default. Pass icon to replace it with one that names the subject, or icon={false} for a text-only note.

<div className="grid w-full max-w-md gap-3">
  <InfoBanner icon={<ClockIcon />}>
    Scores are recalculated every night at 01:00 UTC.
  </InfoBanner>
  <InfoBanner icon={<FlaskConicalIcon />}>
    Attack path analysis is in preview.
  </InfoBanner>
  <InfoBanner tone="neutral" icon={false}>
    Times are shown in your browser&apos;s time zone.
  </InfoBanner>
</div>

Accessibility

• InfoBanner renders an Alert, which has role="alert": screen readers interrupt the user to read it as soon as it appears. Most banners are part of the page from the first render and are not urgent; pass role="note" to them. Keep role="alert" for a banner that appears because something just went wrong.
• The icon is decorative. The sentence must make sense without it and without the color.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.