logo
简体中文

导航菜单

文档

Badge

简介

Badge 组件用于突出显示少量信息，如标签、状态或计数。

组件特性：

  • 支持多种预设颜色
  • 支持多种尺寸
  • 支持描边样式
  • 响应式设计，适配不同屏幕尺寸

案例

default
primary
secondary
accent
ghost
info
success
warning
error
987,654
primary 
---
import { Badge } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
  <Badge>default</Badge>
  <Badge variant="primary">primary</Badge>
  <Badge variant="secondary">secondary</Badge>
  <Badge variant="accent">accent</Badge>
  <Badge variant="ghost">ghost</Badge>
  <Badge variant="info">info</Badge>
  <Badge variant="success">success</Badge>
  <Badge variant="warning">warning</Badge>
  <Badge variant="error">error</Badge>
</div>
default
primary
secondary
accent
ghost
info
success
warning
error
987,654
primary 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge size="lg">987,654</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error
987,654
primary 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge outline={true} variant="primary">primary</Badge>

Props

class

自定义 CSS 类名，用于覆盖默认样式。

默认样式
自定义类名
圆角样式
阴影效果 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge>默认样式</Badge>
默认样式
自定义类名
圆角样式
阴影效果 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge class="custom-badge">自定义类名</Badge>

<style>
  .custom-badge {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    font-weight: bold;
  }
</style>
默认样式
自定义类名
圆角样式
阴影效果 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge class="rounded-full px-3 py-1">圆角样式</Badge>

<style>
  .rounded-full {
    border-radius: 9999px;
  }

  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
</style>
默认样式
自定义类名
圆角样式
阴影效果 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge class="shadow-lg">阴影效果</Badge>

<style>
  .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
</style>

outline

徽章是否为描边样式，设置为 true 时显示为描边风格。

primary
secondary
accent 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge outline={true} variant="primary">primary</Badge>
primary
secondary
accent 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge outline={true} variant="secondary">secondary</Badge>
primary
secondary
accent 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge outline={true} variant="accent">accent</Badge>

size

徽章的尺寸，支持 xs、sm、md、lg 四种尺寸。

987,654
987,654
987,654
987,654 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge size="lg">987,654</Badge>
987,654
987,654
987,654
987,654 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge size="md">987,654</Badge>
987,654
987,654
987,654
987,654 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge size="sm">987,654</Badge>
987,654
987,654
987,654
987,654 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge size="xs">987,654</Badge>

variant

徽章的颜色变体，支持多种预设颜色主题。

default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge>default</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="primary">primary</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="secondary">secondary</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="accent">accent</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="ghost">ghost</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="info">info</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="success">success</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="warning">warning</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge variant="error">error</Badge>

Slots

default

徽章内容，支持任意文本内容。

default
primary
secondary
accent
ghost
info
success
warning
error
987,654
primary 
---
import { Badge } from '@coffic/cosy-ui';
---

<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
  <Badge>default</Badge>
  <Badge variant="primary">primary</Badge>
  <Badge variant="secondary">secondary</Badge>
  <Badge variant="accent">accent</Badge>
  <Badge variant="ghost">ghost</Badge>
  <Badge variant="info">info</Badge>
  <Badge variant="success">success</Badge>
  <Badge variant="warning">warning</Badge>
  <Badge variant="error">error</Badge>
</div>
default
primary
secondary
accent
ghost
info
success
warning
error
987,654
primary 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge size="lg">987,654</Badge>
default
primary
secondary
accent
ghost
info
success
warning
error
987,654
primary 
---
import { Badge } from '@coffic/cosy-ui';
---

<Badge outline={true} variant="primary">primary</Badge>

搜索