Banner
@cloudflare/kumo

Banner

Displays contextual inline messages for informational, alert, or error states.

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.

Maintenance scheduled

This service will be unavailable for 10 minutes.

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

/** Shows all banner variants with structured title and description. */
export function BannerVariantsDemo() {
  return (
    <div className="w-full space-y-3">
      <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."
      />
      <Banner
        icon={<Info weight="fill" />}
        variant="secondary"
        title="Maintenance scheduled"
        description="This service will be unavailable for 10 minutes."
      />
    </div>
  );
}

Installation

Barrel 

import { Banner } from "@cloudflare/kumo";

Granular 

import { Banner } from "@cloudflare/kumo/components/banner";

Usage 

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.

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

/** Default informational banner with title and description. */
export function BannerDefaultDemo() {
  return (
    <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.

 
import { Banner } from "@cloudflare/kumo";
import { Warning } from "@phosphor-icons/react";

/** Alert banner for warnings that need attention. */
export function BannerAlertDemo() {
  return (
    <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.

 
import { Banner } from "@cloudflare/kumo";
import { WarningCircle } from "@phosphor-icons/react";

/** Error banner for critical issues. */
export function BannerErrorDemo() {
  return (
    <Banner
      icon={<WarningCircle weight="fill" />}
      variant="error"
      title="Save failed"
      description="We couldn't save your changes. Please try again."
    />
  );
}

Secondary

Maintenance scheduled

This service will be unavailable for 10 minutes.

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

/** Neutral secondary banner for contextual messages. */
export function BannerSecondaryDemo() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      variant="secondary"
      title="Maintenance scheduled"
      description="This service will be unavailable for 10 minutes."
    />
  );
}

With icon

Review required

Please review your billing information before proceeding.

 
import { Banner } from "@cloudflare/kumo";
import { Warning } from "@phosphor-icons/react";

/** Banner with custom icon and structured content. */
export function BannerWithIconDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="Review required"
      description="Please review your billing information before proceeding."
    />
  );
}

With action

Update available

A new version is ready to install.

Save failed

We couldn't save your changes. Please try again.

Save failed

We couldn't save your changes. Please try again.

Save failed

We couldn't save your changes. Please try again.

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

/** Banner with action buttons: CTA and dismissable. */
export function BannerWithActionDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        icon={<Info weight="fill" />}
        title="Update available"
        description="A new version is ready to install."
        action={
          <Banner.Actions>
            <Banner.Action>Update</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </Banner.Actions>
        }
      />
      <Banner
        variant="error"
        icon={<WarningCircle weight="fill" />}
        title="Save failed"
        description="We couldn't save your changes. Please try again."
        action={
          <Banner.Actions>
            <Banner.Action>Retry</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </Banner.Actions>
        }
      />
      <Banner
        variant="alert"
        icon={<WarningCircle weight="fill" />}
        title="Save failed"
        description="We couldn't save your changes. Please try again."
        action={
          <Banner.Actions>
            <Banner.Action>Retry</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </Banner.Actions>
        }
      />
      <Banner
        variant="secondary"
        icon={<WarningCircle weight="fill" />}
        title="Save failed"
        description="We couldn't save your changes. Please try again."
        action={
          <Banner.Actions>
            <Banner.Action>Retry</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </Banner.Actions>
        }
      />
    </div>
  );
}

With multiple actions

Session expiring

Your session will expire in 5 minutes.

Session expiring

Your session will expire in 5 minutes.

Session expiring

Your session will expire in 5 minutes.

Session expiring

Your session will expire in 5 minutes.

 
import { Banner } from "@cloudflare/kumo";
import { Warning } from "@phosphor-icons/react";

/** Banner with multiple action buttons. */
export function BannerWithActionsDemo() {
  return (
    <div className="space-y-3 w-full">
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
      action={
        <Banner.Actions>
          <Banner.Action>Dismiss</Banner.Action>
          <Banner.Action variant="secondary">Extend session</Banner.Action>
        </Banner.Actions>
      }
    /> 
    <Banner
      icon={<Warning weight="fill" />}
      variant="default"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
      action={
        <Banner.Actions>
          <Banner.Action>Dismiss</Banner.Action>
          <Banner.Action variant="secondary">Extend session</Banner.Action>
        </Banner.Actions>
      }
    />
    <Banner
      icon={<Warning weight="fill" />}
      variant="error"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
      action={
        <Banner.Actions>
          <Banner.Action>Dismiss</Banner.Action>
          <Banner.Action variant="secondary">Extend session</Banner.Action>
        </Banner.Actions>
      }
    />
    <Banner
      icon={<Warning weight="fill" />}
      variant="secondary"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
      action={
        <Banner.Actions>
          <Banner.Action>Dismiss</Banner.Action>
          <Banner.Action variant="secondary">Extend session</Banner.Action>
        </Banner.Actions>
      }
    />
    </div>
  );
}

Compact size

Use size="sm" for dialogs and other tight spaces. Its Banner.Action children inherit the banner size and default to the xs button size.

Update availableA new version is ready to install.
 
import { Banner } from "@cloudflare/kumo";
import { Info, X } from "@phosphor-icons/react";

/**
 * Compact `size="sm"` banner for dialogs and other tight spaces. The tighter
 * spacing and smaller text carry through to the CTAs: `Banner.Action` children
 * inherit the banner size and default to the `xs` button size.
 */
export function BannerCompactDemo() {
  return (
    <Banner
      size="sm"
      icon={<Info weight="fill" />}
      title="Update available"
      description="A new version is ready to install."
      action={
        <Banner.Actions>
          <Banner.Action>Update</Banner.Action>
          <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
        </Banner.Actions>
      }
    />
  );
}

Custom content

Custom content supported

This banner supports custom content with Text.

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

/** Banner with custom React content in description. */
export function BannerCustomContentDemo() {
  return (
    <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

PropTypeDefaultDescription
classNamestring-Additional CSS classes merged via `cn()`.
idstring--
langstring--
iconReactNode-Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`).
titlestring-Primary heading text for the banner. Use for i18n string injection.
descriptionReactNode-Secondary description text displayed below the title. Use for i18n string injection.
actionReactNode-Action slot rendered at the trailing end of the banner (e.g. a CTA button or link). Use the `Banner.Actions` / `Banner.Action` compound for accent-aware CTAs that self-style to the banner variant; other nodes are rendered as-is. Only used in structured mode (with `title` or `description`).
textstring--
childrenReactNode--
variant"default" | "alert" | "error" | "secondary""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 - `"secondary"` — Neutral banner for secondary messages
size"base" | "sm""base"Size of the banner. A `"sm"` banner uses tighter spacing and smaller text, and defaults its `Banner.Action` children to the `"xs"` size — suited to dialogs and other tight spaces.