logo
简体中文
导航

Badge

简介

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

  • 支持多种预设颜色
  • 支持多种尺寸
  • 支持描边样式

使用示例

通过不同的标签页展示 Badge 的各种使用场景：

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

<div class="cosy:flex cosy:flex-wrap cosy:items-center cosy:gap-2">
  <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
987,654
987,654
987,654
primary
secondary
accent
defaultprimarysecondaryaccent
 
---
import { Badge } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:items-center cosy:gap-2">
  <Badge size="lg">987,654</Badge>
  <Badge size="md">987,654</Badge>
  <Badge size="sm">987,654</Badge>
  <Badge size="xs">987,654</Badge>
</div>
default
primary
secondary
accent
ghost
info
success
warning
error
987,654
987,654
987,654
987,654
primary
secondary
accent
defaultprimarysecondaryaccent
 
---
import { Badge } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-2">
  <Badge outline={true} variant="primary">primary</Badge>
  <Badge outline={true} variant="secondary">secondary</Badge>
  <Badge outline={true} variant="accent">accent</Badge>
</div>
default
primary
secondary
accent
ghost
info
success
warning
error
987,654
987,654
987,654
987,654
primary
secondary
accent
defaultprimarysecondaryaccent
 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div class="cosy:flex cosy:gap-2">
        <Badge>default</Badge>
        <Badge variant="primary">primary</Badge>
        <Badge variant="secondary">secondary</Badge>
        <Badge variant="accent">accent</Badge>
    </div>
</template>

尺寸

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

<div class="cosy:flex cosy:items-center cosy:gap-2">
  <Badge size="lg">987,654</Badge>
  <Badge size="md">987,654</Badge>
  <Badge size="sm">987,654</Badge>
  <Badge size="xs">987,654</Badge>
</div>

描边

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

<div class="cosy:flex cosy:gap-2">
  <Badge outline={true} variant="primary">primary</Badge>
  <Badge outline={true} variant="secondary">secondary</Badge>
  <Badge outline={true} variant="accent">accent</Badge>
</div>

Vue 组件

defaultprimarysecondaryaccent
 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div class="cosy:flex cosy:gap-2">
        <Badge>default</Badge>
        <Badge variant="primary">primary</Badge>
        <Badge variant="secondary">secondary</Badge>
        <Badge variant="accent">accent</Badge>
    </div>
</template>