徽章组件

最后更新: 七月 13, 2026

仅 CSS Tailwind CSS 徽章，包含主要、次要、重音、信息、成功、警告和错误变体。柔和、轮廓和幻影样式，尺寸为 xs-lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

徽章组件是小型、紧凑的标签，用于突出显示、分类或显示状态信息。徽章采用语义 HTML 和 Tailwind CSS 构建，支持多种尺寸、颜色和样式，可灵活集成到表格、卡片、用户配置文件和通知系统中。徽章重量轻且易于使用，可增强信息层次结构，而不会增加视觉混乱。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级	类型	描述
badge	根据	小内嵌标签
badge-outline	风格	带彩色边框的透明填充
badge-soft	风格	柔和的有色背景
badge-ghost	风格	微妙的背景，无边框
badge-dashed	风格	虚线边框样式
badge-pill	风格	全圆形药丸形状
badge-rounded	风格	适度舍入
badge-circle	风格	单个字符或数字的等宽圆圈
badge-square	风格	没有四舍五入的正方形
badge-xs	尺寸	特小号
badge-sm	尺寸	小的
badge-md	尺寸	中（默认）
badge-lg	尺寸	大的
badge-xl	尺寸	特大号
badge-2xl	尺寸	2×特大号
badge-primary	颜色	主要主题颜色
badge-secondary	颜色	次要主题色
badge-accent	颜色	强调主题颜色
badge-neutral	颜色	中性主题色
badge-info	颜色	信息语义颜色
badge-success	颜色	成功语义色
badge-warning	颜色	警告语义颜色
badge-error	颜色	错误语义颜色

基本用法

Badge

<span class="badge">Badge</span>

<span className="badge">Badge</span>

查看代码

徽章尺寸

Xsmall Small Medium Large Xlarge 2XLarge

<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>

查看代码

徽章颜色

Default Primary Secondary Accent Info Success Warning Error Neutral

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>

查看代码

徽章样式

软徽章

Default Primary Secondary Accent Info Success Warning Error Neutral

<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>

查看代码

轮廓徽章

Default Primary Secondary Accent Info Success Warning Error Neutral

<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>

查看代码

Dashed Badges

Default Primary Secondary Accent Info Success Warning Error Neutral

<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>

查看代码

幽灵徽章

Ghost

<span class="badge badge-ghost">Ghost</span>

查看代码

Badge Shapes

圆形徽章

<span class="badge badge-error badge-rounded">10</span>

查看代码

Pill Badge

Pill badge

<span class="badge badge-warning badge-pill">Pill badge</span>

查看代码

方形徽章

99+

<span class="badge badge-neutral badge-square">99+</span>

查看代码

圆形徽章

<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>

查看代码

徽章指示器

空徽章非常适合状态指示器或通知点。

<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>

查看代码

徽章组成

Integrate badges with icons or nest them inside other components like buttons.

带有图标的徽章

Info Success Warning Error

<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>

查看代码

徽章内按钮

<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>

查看代码

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的徽章类名称和结构。不再有幻觉课程。

尝试Cherry MCP

徽章组件

基本用法

徽章尺寸

徽章颜色

徽章样式

软徽章

轮廓徽章

Dashed Badges

幽灵徽章

Badge Shapes

圆形徽章

Pill Badge

方形徽章

圆形徽章

徽章指示器

徽章组成

带有图标的徽章

徽章内按钮

有关的