Chip 标签

用法

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

组件结构

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

<Chip>
  Label text
</Chip>

示例

变体

状态类型

带图标

自定义样式

Tailwind CSS

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

基础类

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

颜色类

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

变体类

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

尺寸类

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

复合变体类

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

Chip.Label

相关组件