Skip to content
Lenso UI

Chip 标签

用于显示标签、状态与分类的小型信息徽章

用法

import { Chip } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipBasic() {  return (    <div {...stylex.props(s.wrap3)}>      <Chip>Default</Chip>      <Chip color="accent">Accent</Chip>      <Chip color="success">Success</Chip>      <Chip color="warning">Warning</Chip>      <Chip color="danger">Danger</Chip>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

纯文本子节点会自动包裹在 <Chip.Label> 中。

<Chip>  Label text</Chip>

示例

变体

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { CircleDashed } from "@gravity-ui/icons";import { Chip, Separator } from "@lenso/ui";import { Fragment } from "react";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipVariants() {  const sizes = ["lg", "md", "sm"] as const;  const variants = ["primary", "secondary", "tertiary", "soft"] as const;  const colors = ["accent", "default", "success", "warning", "danger"] as const;  return (    <div {...stylex.props(s.column8, s.scroll)}>      {sizes.map((size, index) => (        <Fragment key={size}>          <div {...stylex.props(s.column4)}>            <h3 {...stylex.props(s.textSm, s.semibold, s.muted, s.capitalize)}>{size}</h3>            <div {...stylex.props(s.row3)}>              <div {...stylex.props(s.labelCell)} />              {colors.map((color) => (                <div key={color} {...stylex.props(s.matrixCell)}>                  <span {...stylex.props(s.textXs, s.muted, s.capitalize)}>{color}</span>                </div>              ))}            </div>            <div {...stylex.props(s.column3)}>              {variants.map((variant) => (                <div key={variant} {...stylex.props(s.row3)}>                  <div {...stylex.props(s.labelCell, s.textSm, s.muted, s.capitalize)}>                    {variant}                  </div>                  {colors.map((color) => (                    <div key={color} {...stylex.props(s.matrixCell)}>                      <Chip color={color} size={size} variant={variant}>                        <CircleDashed />                        <Chip.Label>Label</Chip.Label>                        <CircleDashed />                      </Chip>                    </div>                  ))}                </div>              ))}            </div>          </div>          {index < sizes.length - 1 && <Separator />}        </Fragment>      ))}    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

状态类型

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Ban, Check, CircleFill, CircleInfo, TriangleExclamation } from "@gravity-ui/icons";import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipStatuses() {  return (    <div {...stylex.props(s.column4)}>      <div {...stylex.props(s.wrap3)}>        <Chip variant="primary">          <CircleFill width={6} />          <Chip.Label>Default</Chip.Label>        </Chip>        <Chip color="success" variant="primary">          <CircleFill width={6} />          <Chip.Label>Active</Chip.Label>        </Chip>        <Chip color="warning" variant="primary">          <CircleFill width={6} />          <Chip.Label>Pending</Chip.Label>        </Chip>        <Chip color="danger" variant="primary">          <CircleFill width={6} />          <Chip.Label>Inactive</Chip.Label>        </Chip>      </div>      <div {...stylex.props(s.wrap3)}>        <Chip>          <CircleInfo width={12} />          <Chip.Label>New Feature</Chip.Label>        </Chip>        <Chip color="success">          <Check width={12} />          <Chip.Label>Available</Chip.Label>        </Chip>        <Chip color="warning">          <TriangleExclamation width={12} />          <Chip.Label>Beta</Chip.Label>        </Chip>        <Chip color="danger">          <Ban width={12} />          <Chip.Label>Deprecated</Chip.Label>        </Chip>      </div>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

带图标

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { ChevronDown, CircleCheckFill, CircleFill, Clock, Xmark } from "@gravity-ui/icons";import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipWithIcon() {  return (    <div {...stylex.props(s.wrap3)}>      <Chip>        <CircleFill width={6} />        <Chip.Label>Information</Chip.Label>      </Chip>      <Chip color="success">        <CircleCheckFill width={12} />        <Chip.Label>Completed</Chip.Label>      </Chip>      <Chip color="warning">        <Clock width={12} />        <Chip.Label>Pending</Chip.Label>      </Chip>      <Chip color="danger">        <Xmark width={12} />        <Chip.Label>Failed</Chip.Label>      </Chip>      <Chip color="accent">        <Chip.Label>Label</Chip.Label>        <ChevronDown width={12} />      </Chip>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function CustomStyles() {  return (    <div {...stylex.props(s.wrap2)}>      <Chip xstyle={s.chipDraft}>Draft</Chip>      <Chip xstyle={s.chipReview}>In review</Chip>      <Chip xstyle={s.chipPublished}>Published</Chip>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

可使用 @layer components 指令自定义 Chip 组件类。 了解更多。

@layer components {  .chip {    @apply rounded-full text-xs;  }
  .chip__label {    @apply font-medium;  }
  .chip--accent {    @apply border-accent/20;  }
  .chip--accent .chip__label {    @apply text-accent;  }}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Chip 组件使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

  • .chip - 基础标签容器样式
  • .chip__label - 标签文本 slot 样式

颜色类 [!toc]

  • .chip--accent - 强调色变体
  • .chip--danger - 危险色变体
  • .chip--default - 默认色变体
  • .chip--success - 成功色变体
  • .chip--warning - 警告色变体

变体类 [!toc]

  • .chip--primary - 填充背景的主变体
  • .chip--secondary - 带边框的次变体
  • .chip--tertiary - 透明背景的三级变体
  • .chip--soft - 浅色背景的 soft 变体

尺寸类 [!toc]

  • .chip--sm - 小尺寸
  • .chip--md - 中尺寸（默认）
  • .chip--lg - 大尺寸

复合变体类 [!toc]

Chip 支持组合变体与颜色类（如 .chip--secondary.chip--accent）。以下组合有默认样式：

Primary Variants:

  • .chip--primary.chip--accent - 填充背景的 primary accent 组合
  • .chip--primary.chip--success - 填充背景的 primary success 组合
  • .chip--primary.chip--warning - 填充背景的 primary warning 组合
  • .chip--primary.chip--danger - 填充背景的 primary danger 组合

Soft Variants:

  • .chip--accent.chip--soft - 浅色背景的 soft accent 组合
  • .chip--success.chip--soft - 浅色背景的 soft success 组合
  • .chip--warning.chip--soft - 浅色背景的 soft warning 组合
  • .chip--danger.chip--soft - 浅色背景的 soft danger 组合

Note: 可使用 CSS 中的 @layer components 指令为任意变体-颜色组合（如 .chip--secondary.chip--accent、.chip--tertiary.chip--success）应用自定义样式。

API 参考

Chip

Prop类型默认值描述
childrenReact.ReactNode-标签内显示的内容
classNamestring-根元素附加 CSS 类
color"default" | "accent" | "success" | "warning" | "danger""default"标签颜色变体
variant"primary" | "secondary" | "tertiary" | "soft""secondary"视觉样式变体
size"sm" | "md" | "lg""md"标签尺寸

Chip.Label

Prop类型默认值描述
childrenReact.ReactNode-标签文本内容
classNamestring-标签 slot 附加 CSS 类

相关组件

Avatar 头像

显示用户头像，支持自定义 fallback 内容

CloseButton 关闭按钮

用于关闭对话框、模态框或 dismiss 内容的按钮组件

Separator 分隔符

在内容区块之间进行视觉分隔。