Update available
A new version is ready to install.
Session expiring
Your session will expire in 5 minutes.
Save failed
We couldn't save your changes. Please try again.
<Banner
icon={<Info weight="fill" />}
title="Update available"
description="A new version is ready to install."
/>
<Banner
icon={<Warning weight="fill" />}
variant="alert"
title="Session expiring"
description="Your session will expire in 5 minutes."
/>
<Banner
icon={<WarningCircle weight="fill" />}
variant="error"
title="Save failed"
description="We couldn't save your changes. Please try again."
/>Installation
npm install @cloudflare/kumoUsage
import { Banner } from "@cloudflare/kumo";
import { Info } from "@phosphor-icons/react";
export default function Example() {
return (
<Banner
icon={<Info weight="fill" />}
title="Update available"
description="A new version is ready to install."
/>
);
}Examples
Variants
Default
Update available
A new version is ready to install.
<Banner
icon={<Info weight="fill" />}
title="Update available"
description="A new version is ready to install."
/>Alert
Session expiring
Your session will expire in 5 minutes.
<Banner
icon={<Warning weight="fill" />}
variant="alert"
title="Session expiring"
description="Your session will expire in 5 minutes."
/>Error
Save failed
We couldn't save your changes. Please try again.
<Banner
icon={<WarningCircle weight="fill" />}
variant="error"
title="Save failed"
description="We couldn't save your changes. Please try again."
/>With icon
Review required
Please review your billing information before proceeding.
<Banner
icon={<Warning weight="fill" />}
variant="alert"
title="Review required"
description="Please review your billing information before proceeding."
/>Custom content
Custom content supported
This banner supports custom content with Text.
<Banner
icon={<Info weight="fill" />}
title="Custom content supported"
description={
<Text DANGEROUS_className="text-inherit">
This banner supports <strong>custom content</strong> with Text.
</Text>
}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | - | Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`). |
| title | string | - | Primary heading text for the banner. Use for i18n string injection. |
| description | ReactNode | - | Secondary description text displayed below the title. Use for i18n string injection. |
| text | string | - | - |
| children | ReactNode | - | - |
| variant | "default" | "alert" | "error" | "default" | Visual style of the banner. - `"default"` — Informational blue banner for general messages - `"alert"` — Warning yellow banner for cautionary messages - `"error"` — Error red banner for critical issues |
| className | string | - | Additional CSS classes merged via `cn()`. |