logo
English

导航菜单

Documents

Badge

Introduction

The Badge component is used to highlight small amounts of information, such as tags, statuses, or counts.

Component Features:

  • Supports multiple preset colors
  • Supports multiple sizes
  • Supports outline style
  • Responsive design that adapts to different screen sizes

Examples

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

Custom CSS class name for overriding default styles.

默认样式
自定义类名
圆角样式
阴影效果 
---
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

Whether the badge is in outline style. When set to true, displays as outline style.

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

Badge size, supporting xs, sm, md, lg four sizes.

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

Badge color variant, supporting multiple preset color themes.

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

Badge content, supporting any text content.

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>

搜索