Banner 通告栏
@lark-ui/core

Banner 通告栏

展示与上下文相关的行内消息，用于信息、警告或错误状态。

有可用更新

新版本已可安装。

会话即将过期

您的会话将在 5 分钟后过期。

保存失败

无法保存您的更改，请重试。

已安排维护

此服务将中断 10 分钟。

import { Banner } from "@lark-ui/core";
import { Info, WarningCircle, Warning } from "@phosphor-icons/react";

/** 展示所有通告栏（Banner）变体，包含结构化的标题和描述。 */
export function BannerVariantsDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        icon={<Info weight="fill" />}
        title="有可用更新"
        description="新版本已可安装。"
      />
      <Banner
        icon={<Warning weight="fill" />}
        variant="alert"
        title="会话即将过期"
        description="您的会话将在 5 分钟后过期。"
      />
      <Banner
        icon={<WarningCircle weight="fill" />}
        variant="error"
        title="保存失败"
        description="无法保存您的更改，请重试。"
      />
      <Banner
        icon={<Info weight="fill" />}
        variant="secondary"
        title="已安排维护"
        description="此服务将中断 10 分钟。"
      />
    </div>
  );
}

安装

统一导出

import { Banner } from "@lark-ui/core";

按需导出

import { Banner } from "@lark-ui/core/components/banner";

用法

import { Banner } from "@lark-ui/core";
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."
    />
  );
}

示例

变体

默认

有可用更新

新版本已可安装。

import { Banner } from "@lark-ui/core";
import { Info } from "@phosphor-icons/react";

/** 默认的信息类通告栏，包含标题和描述。 */
export function BannerDefaultDemo() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      title="有可用更新"
      description="新版本已可安装。"
    />
  );
}

警告

会话即将过期

您的会话将在 5 分钟后过期。

import { Banner } from "@lark-ui/core";
import { Warning } from "@phosphor-icons/react";

/** 警示类通告栏，用于需要用户关注的警告。 */
export function BannerAlertDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="会话即将过期"
      description="您的会话将在 5 分钟后过期。"
    />
  );
}

错误

保存失败

无法保存您的更改，请重试。

import { Banner } from "@lark-ui/core";
import { WarningCircle } from "@phosphor-icons/react";

/** 错误类通告栏，用于严重问题。 */
export function BannerErrorDemo() {
  return (
    <Banner
      icon={<WarningCircle weight="fill" />}
      variant="error"
      title="保存失败"
      description="无法保存您的更改，请重试。"
    />
  );
}

次要

已安排维护

此服务将中断 10 分钟。

import { Banner } from "@lark-ui/core";
import { Info } from "@phosphor-icons/react";

/** 中性的次要通告栏，用于上下文提示信息。 */
export function BannerSecondaryDemo() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      variant="secondary"
      title="已安排维护"
      description="此服务将中断 10 分钟。"
    />
  );
}

带图标

需要复核

请在继续之前核对您的账单信息。

import { Banner } from "@lark-ui/core";
import { Warning } from "@phosphor-icons/react";

/** 带自定义图标和结构化内容的通告栏。 */
export function BannerWithIconDemo() {
  return (
    <Banner
      icon={<Warning weight="fill" />}
      variant="alert"
      title="需要复核"
      description="请在继续之前核对您的账单信息。"
    />
  );
}

描边主题

theme="outlined" 对应飞书 Universe Design 的 ud__notice--outlined：浅色底 + 1px 状态色描边，常用于需要更轻量提示的场合。

有可用更新

新版本已可安装。

会话即将过期

您的会话将在 5 分钟后过期。

保存失败

无法保存您的更改，请重试。

已安排维护

此服务将中断 10 分钟。

import { Banner } from "@lark-ui/core";
import { Info, WarningCircle, Warning } from "@phosphor-icons/react";

/**
 * 描边主题：浅色底 + 1px 状态色描边，对应飞书 `ud__notice--outlined`。
 */
export function BannerOutlinedDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        theme="outlined"
        icon={<Info weight="fill" />}
        title="有可用更新"
        description="新版本已可安装。"
      />
      <Banner
        theme="outlined"
        variant="alert"
        icon={<Warning weight="fill" />}
        title="会话即将过期"
        description="您的会话将在 5 分钟后过期。"
      />
      <Banner
        theme="outlined"
        variant="error"
        icon={<WarningCircle weight="fill" />}
        title="保存失败"
        description="无法保存您的更改，请重试。"
      />
      <Banner
        theme="outlined"
        variant="secondary"
        icon={<Info weight="fill" />}
        title="已安排维护"
        description="此服务将中断 10 分钟。"
      />
    </div>
  );
}

带操作

有可用更新

新版本已可安装。

保存失败

无法保存您的更改，请重试。

保存失败

无法保存您的更改，请重试。

保存失败

无法保存您的更改，请重试。

import { Banner } from "@lark-ui/core";
import { Info, WarningCircle, X } from "@phosphor-icons/react";

/** 带操作按钮的通告栏：主要操作按钮和可关闭按钮。 */
export function BannerWithActionDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        icon={<Info weight="fill" />}
        title="有可用更新"
        description="新版本已可安装。"
        action={
          <>
            <Banner.Action>更新</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="关闭" />
          </>
        }
      />
      <Banner
        variant="error"
        icon={<WarningCircle weight="fill" />}
        title="保存失败"
        description="无法保存您的更改，请重试。"
        action={
          <>
            <Banner.Action>重试</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="关闭" />
          </>
        }
      />
      <Banner
        variant="alert"
        icon={<WarningCircle weight="fill" />}
        title="保存失败"
        description="无法保存您的更改，请重试。"
        action={
          <>
            <Banner.Action>重试</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="关闭" />
          </>
        }
      />
      <Banner
        variant="secondary"
        icon={<WarningCircle weight="fill" />}
        title="保存失败"
        description="无法保存您的更改，请重试。"
        action={
          <>
            <Banner.Action>重试</Banner.Action>
            <Banner.Action variant="ghost" icon={<X />} aria-label="关闭" />
          </>
        }
      />
    </div>
  );
}

带多个操作

您的账户已逾期 90 天。

请立即支付以避免服务中断。

import { Banner } from "@lark-ui/core";
import { Warning } from "@phosphor-icons/react";

/** 带多个操作按钮的通告栏。 */
export function BannerWithActionsDemo() {
  return (
    <div className="w-full space-y-3">
      <Banner
        icon={<Warning weight="fill" />}
        variant="error"
        title="您的账户已逾期 90 天。"
        description="请立即支付以避免服务中断。"
        action={
          <>
            <Banner.Action>立即支付</Banner.Action>
            <Banner.Action variant="secondary">前往账单</Banner.Action>
          </>
        }
      />
    </div>
  );
}

紧凑尺寸

在对话框等空间受限的场景中使用 size="sm"。此时通告栏应服务于周边体验，不与主要操作争夺注意力，因此优先使用与描述文字行内渲染的 Lark Link。需要更强强调时，请使用 Banner.Action，它会渲染在末尾位置。

带行内链接

此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。管理 puppies.cloudflare.dev 的 DNS
import { Banner, Link } from "@lark-ui/core";

/**
 * 紧凑型 `size="sm"` 通告栏，适用于对话框等空间有限的场景。
 */
export function BannerCompactDemo() {
  return (
    <Banner
      size="sm"
      description="此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。"
      action={<Link href="#">管理 puppies.cloudflare.dev 的 DNS</Link>}
    />
  );
}

带行动号召

此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。
import { Banner } from "@lark-ui/core";
import { X } from "@phosphor-icons/react";

/** 带尾部主要操作按钮的紧凑型通告栏。 */
export function BannerCompactWithCtaDemo() {
  return (
    <Banner
      size="sm"
      description="此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。"
      action={
        <>
          <Banner.Action>管理 DNS</Banner.Action>
          <Banner.Action variant="ghost">
            <X />
          </Banner.Action>
        </>
      }
    />
  );
}

不带操作

此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。
import { Banner } from "@lark-ui/core";

/** 不带操作按钮的紧凑型通告栏。 */
export function BannerCompactWithoutActionDemo() {
  return (
    <Banner
      size="sm"
      description="此区域中已存在 puppies.cloudflare.dev 的 DNS 记录。"
    />
  );
}

自定义内容

支持自定义内容

此通告栏支持使用 Text 渲染自定义内容。

import { Banner, Text } from "@lark-ui/core";
import { Info } from "@phosphor-icons/react";

/** 描述中使用自定义 React 内容的通告栏。 */
export function BannerCustomContentDemo() {
  return (
    <Banner
      icon={<Info weight="fill" />}
      title="支持自定义内容"
      description={
        <Text DANGEROUS_className="text-inherit">
          此通告栏支持使用 Text 渲染<strong>自定义内容</strong>。
        </Text>
      }
    />
  );
}

API 参考

属性类型默认值说明
classNamestring-通过 `cn()` 合并的额外 CSS 类名。
idstring--
langstring--
iconReactNode-渲染在通告栏内容之前的图标元素（例如来自 `@phosphor-icons/react`）。
titlestring-通告栏的主标题文字。用于注入国际化文案。
descriptionReactNode-显示在标题下方的次要描述文字。用于注入国际化文案。
actionReactNode-用于放置 CTA 按钮或链接的操作插槽。紧凑型通告栏会把 Lark `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`，将 Lark `Link` 操作内联渲染在描述旁，并把它内部的 `Banner.Action` 子元素设为 `"xs"` 尺寸——适合对话框等空间紧凑的场景。
theme"filled" | "outlined""filled"通告栏的表面处理方式。 - `"filled"` — 平铺的淡色底（默认） - `"outlined"` — 淡色底加 1px 状态色边框