Chip 标签更新

引入

import { Chip } from '@heroui/react';

组件结构

引入 Chip 组件，并通过点语法访问各部分。

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

<Chip>
  Label text
</Chip>

用法

import {Chip} from "@heroui/react";

export function ChipBasic() {
  return (
    <div className="flex flex-wrap items-center gap-3">

变体

import {CircleDashed} from "@gravity-ui/icons";
import {Chip, Separator} from "@heroui/react";
import React from "react";

const sizes = ["lg", "md", "sm"] as const;

带图标

import {ChevronDown, CircleCheckFill, CircleFill, Clock, Xmark} from "@gravity-ui/icons";
import {Chip} from "@heroui/react";

export function ChipWithIcon() {
  return (

状态

import {Ban, Check, CircleFill, CircleInfo, TriangleExclamation} from "@gravity-ui/icons";
import {Chip} from "@heroui/react";

export function ChipStatuses() {
  return (

样式

传入 Tailwind CSS 类

你可以为根容器与各插槽分别添加类名：

import {Chip} from '@heroui/react';

function CustomChip() {
  return (
    <Chip className="rounded-full px-4 py-2 font-bold">
      <Chip.Label className="text-lg uppercase">
        Custom Styled
      </Chip.Label>
    </Chip>
  );
}

自定义组件类

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

@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 类（查看源码样式）：

基础类

• .chip - Chip 容器基础样式
• .chip__label - 标签文本插槽样式

颜色类

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

变体类

• .chip--primary - Primary 变体，实心背景
• .chip--secondary - Secondary 变体，带边框
• .chip--tertiary - Tertiary 变体，透明背景
• .chip--soft - Soft 变体，浅色背景

尺寸类

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

复合变体类

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

Primary 变体：

• .chip--primary.chip--accent - Primary + 强调色，实心背景
• .chip--primary.chip--success - Primary + 成功色，实心背景
• .chip--primary.chip--warning - Primary + 警告色，实心背景
• .chip--primary.chip--danger - Primary + 危险色，实心背景

Soft 变体：

• .chip--accent.chip--soft - Soft + 强调色，浅色背景
• .chip--success.chip--soft - Soft + 成功色，浅色背景
• .chip--warning.chip--soft - Soft + 警告色，浅色背景
• .chip--danger.chip--soft - Soft + 危险色，浅色背景

说明： 你也可以在 CSS 中通过 @layer components 为任意变体与颜色组合（例如 .chip--secondary.chip--accent、.chip--tertiary.chip--success）编写自定义样式。

API 参考

Chip Props

Chip.Label Props