# Info Banner

A one-line note with an icon that gives context about the content below it.

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

function InfoBannerDemo() {
  return (
    <InfoBanner role="note" className="max-w-md">
      Showing alerts from the last 30 days. Older alerts are in the archive.
    </InfoBanner>
  )
}
```

## Usage

```tsx
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](/components/alert) with a fixed layout: an icon and one line of text,
centered vertically. Choose by the shape of the message:

| Use          | When the message                                                       |
| ------------ | ---------------------------------------------------------------------- |
| `InfoBanner` | Fits in one sentence and qualifies the content below it.               |
| `Alert`      | Needs a title and a description, a link to a fix, or an action button. |

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.

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

function InfoBannerTones() {
  return (
    <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.

```tsx
import { ClockIcon, FlaskConicalIcon } from "lucide-react"
import { InfoBanner } from "@zenoxai/ui/patterns/info-banner"

function InfoBannerIcon() {
  return (
    <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

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

### InfoBanner

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| icon | `ReactNode` |  | Replaces the leading Info icon. Pass `false` to render no icon. |
| tone | `"default" \| "destructive" \| "info" \| "success" \| "warning" \| "neutral"` | `info` | Color of the banner. Defaults to `info`. |