Banner - Kumo

This is an informational banner.

This is an alert banner.

This is an error banner.

<Banner>This is an informational banner.</Banner>
<Banner variant={BannerVariant.ALERT}>
  This is an alert banner.
</Banner>
<Banner variant={BannerVariant.ERROR}>
  This is an error banner.
</Banner>

Installation

npm install @cloudflare/kumo

Usage

import { Banner, BannerVariant } from "@cloudflare/kumo";
import { Info } from "@phosphor-icons/react";

export default function Example() {
  return (
    <Banner icon={<Info />} variant={BannerVariant.DEFAULT}>
      You have a new message.
    </Banner>
  );
}

Examples

Variants

Default

This is an informational banner.

<Banner>This is an informational banner.</Banner>

Alert

Your session will expire soon.

<Banner variant={BannerVariant.ALERT}>
  Your session will expire soon.
</Banner>

Error

We couldn't save your changes.

<Banner variant={BannerVariant.ERROR}>
  We couldn't save your changes.
</Banner>

With icon

Review your billing information.

<Banner icon={<WarningCircle />} variant={BannerVariant.ALERT}>
  Review your billing information.
</Banner>

Custom content

This banner supports custom content with Text.

<Banner icon={<Info />}>
  <Text DANGEROUS_className="text-inherit">
    This banner supports <strong>custom content</strong> with Text.
  </Text>
</Banner>

API Reference

Prop	Type	Default	Description
icon	`ReactNode`	-	Icon element rendered before the banner text (e.g. from `@phosphor-icons/react`).
text	`string`	-	-
children	`ReactNode`	-	Banner message content. Accepts strings or custom React elements.
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()`.