Banner
@cloudflare/kumo

Banner

用于展示信息、提醒或错误状态的上下文内联消息。

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>
  );
}

安装

批量导入

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

按需导入

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

用法

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."
    />
  );
}

示例

变体

默认

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."
    />
  );
}

提醒

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."
    />
  );
}

错误

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."
    />
  );
}

次要

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."
    />
  );
}

带图标

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."
    />
  );
}

带单个操作

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.Action>Update</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </>
        }
      />
      <Banner
        variant="error"
        icon={<WarningCircle weight="fill" />}
        title="Save failed"
        description="We couldn't save your changes. Please try again."
        action={
          <>
            <Banner.Action>Retry</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </>
        }
      />
      <Banner
        variant="alert"
        icon={<WarningCircle weight="fill" />}
        title="Save failed"
        description="We couldn't save your changes. Please try again."
        action={
          <>
            <Banner.Action>Retry</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </>
        }
      />
      <Banner
        variant="secondary"
        icon={<WarningCircle weight="fill" />}
        title="Save failed"
        description="We couldn't save your changes. Please try again."
        action={
          <>
            <Banner.Action>Retry</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="Dismiss" />
          </>
        }
      />
    </div>
  );
}

带多个操作

Your account is 90 days past due.

Pay now to avoid interruption.

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

/** Banner with multiple action buttons. */
export function BannerWithActionsDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        icon={<Warning weight="fill" />}
        variant="error"
        title="Your account is 90 days past due."
        description="Pay now to avoid interruption."
        action={
          <>
            <Banner.Action>Pay now</Banner.Action>
            <Banner.Action variant="secondary">Go to billing</Banner.Action>
          </>
        }
      />
    </div>
  );
}

带链接操作

传入 href 可将 Banner.Action 渲染为链接。它会通过应用的 LinkProvider 组件渲染，因此一旦 LinkProvider 配置了路由器的链接，就会使用客户端路由。使用 external 可在新标签页中打开链接。

Review your payment method

Add a credit or debit card directly in Billing to continue.

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

/** Banner actions rendered as links. */
export function BannerWithLinksDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="Review your payment method"
      description="Add a credit or debit card directly in Billing to continue."
      action={
        <>
          <Banner.Action
            variant="secondary"
            href="https://developers.cloudflare.com/billing/"
            external
          >
            View docs
          </Banner.Action>
          <Banner.Action href="https://dash.cloudflare.com/">
            Manage payments
          </Banner.Action>
        </>
      }
    />
  );
}

禁用的链接操作会渲染为禁用的按钮，阻止导航。

紧凑尺寸

在对话框及其他空间受限的上下文中使用 size="sm"。此处横幅应辅助周围的体验而不与主操作竞争，因此优先使用与描述内联渲染的 Kumo Link。当需要更强强调时，可使用 Banner.Action，它会渲染在末尾处。

带内联链接

A DNS record for puppies.cloudflare.dev already exists in this zone.Manage DNS for puppies.cloudflare.dev
import { Banner, Link } from "@cloudflare/kumo";

/**
 * Compact `size="sm"` banner for dialogs and other tight spaces.
 */
export function BannerCompactDemo() {
  return (
    <Banner
      size="sm"
      description="A DNS record for puppies.cloudflare.dev already exists in this zone."
      action={<Link href="#">Manage DNS for puppies.cloudflare.dev</Link>}
    />
  );
}

带 CTA

A DNS record for puppies.cloudflare.dev already exists in this zone.
import { Banner } from "@cloudflare/kumo";
import { X } from "@phosphor-icons/react";

/** Compact banner with a trailing CTA. */
export function BannerCompactWithCtaDemo() {
  return (
    <Banner
      size="sm"
      description="A DNS record for puppies.cloudflare.dev already exists in this zone."
      action={
        <>
          <Banner.Action>Manage DNS</Banner.Action>
          <Banner.Action variant="ghost">
            <X />
          </Banner.Action>
        </>
      }
    />
  );
}

无操作

A DNS record for puppies.cloudflare.dev already exists in this zone.
import { Banner } from "@cloudflare/kumo";

/** Compact banner without an action. */
export function BannerCompactWithoutActionDemo() {
  return (
    <Banner
      size="sm"
      description="A DNS record for puppies.cloudflare.dev already exists in this zone."
    />
  );
}

自定义内容

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 参考

PropTypeDefaultDescription
classNamestring-

通过 cn() 合并的额外 CSS 类。

idstring--
langstring--
iconReactNode-

在横幅内容之前渲染的图标元素（例如来自 @phosphor-icons/react）。

titlestring-

横幅的主要标题文本。用于国际化字符串注入。

descriptionReactNode-

显示在标题下方的次要描述文本。用于国际化字符串注入。

actionReactNode-

CTA 按钮或链接的操作插槽。紧凑横幅会在描述旁内联渲染 Kumo Link；CTA 渲染在尾部。使用 Banner.Action 可让 CTA 根据横幅变体自动调整样式；其他节点原样渲染。可在 Fragment 中传入多个操作。仅在结构化模式（带 title 或 description）下使用。

textstring--
childrenReactNode--
variant"default" | "alert" | "error" | "secondary""default"

横幅的视觉样式。

  • "default" — 用于一般消息的信息性蓝色横幅
  • "alert" — 用于警示消息的警告黄色横幅
  • "error" — 用于严重问题的错误红色横幅
  • "secondary" — 用于次要消息的中性横幅
size"base" | "sm""base"

横幅的大小。"sm" 横幅使用更紧凑的间距和 text-sm，将 Kumo Link 操作与描述内联渲染，并将其 Banner.Action 子元素设置为 "xs" 大小——适用于对话框和其他紧凑空间。