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

默认PrimarySecondaryAccent

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>

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

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

<template>
    <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
        <Badge>默认</Badge>
        <Badge variant="primary">Primary</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="accent">Accent</Badge>
    </div>
</template>

<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Badge size="lg">987,654</Badge>
</template>

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

<template>
    <Badge :outline="true" variant="primary">primary</Badge>
</template>

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>

<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Badge>默认样式</Badge>
</template>

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

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

<style>
.custom-badge {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    font-weight: bold;
}
</style>

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

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

<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>

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

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

<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

primary

secondary

accent

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

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

<template>
    <Badge :outline="true" variant="primary">primary</Badge>
</template>

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

<template>
    <Badge :outline="true" variant="secondary">secondary</Badge>
</template>

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

<template>
    <Badge :outline="true" variant="accent">accent</Badge>
</template>

size

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

987,654

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Badge size="lg">987,654</Badge>
</template>

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

<template>
    <Badge size="md">987,654</Badge>
</template>

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

<template>
    <Badge size="sm">987,654</Badge>
</template>

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

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

variant

Badge color variant, supporting multiple preset color themes.

default

primary

secondary

accent

ghost

info

success

warning

error

default

primary

secondary

accent

ghost

info

success

warning

error

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge>default</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="primary">primary</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="secondary">secondary</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="accent">accent</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="ghost">ghost</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="info">info</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="success">success</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

<Badge variant="warning">warning</Badge>

---



import { Badge } from "@coffic/cosy-ui";
---

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

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

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

<template>
    <Badge variant="primary">primary</Badge>
</template>

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

<template>
    <Badge variant="secondary">secondary</Badge>
</template>

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

<template>
    <Badge variant="accent">accent</Badge>
</template>

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

<template>
    <Badge variant="ghost">ghost</Badge>
</template>

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

<template>
    <Badge variant="info">info</Badge>
</template>

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

<template>
    <Badge variant="success">success</Badge>
</template>

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

<template>
    <Badge variant="warning">warning</Badge>
</template>

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

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

Slots

default

Badge content, supporting any text content.

default

primary

secondary

accent

ghost

info

success

warning

error

987,654

primary

默认PrimarySecondaryAccent

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>

---



import { Badge } from "@coffic/cosy-ui";
---

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

---



import { Badge } from "@coffic/cosy-ui";
---

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

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

<template>
    <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
        <Badge>默认</Badge>
        <Badge variant="primary">Primary</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="accent">Accent</Badge>
    </div>
</template>

<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Badge size="lg">987,654</Badge>
</template>

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

<template>
    <Badge :outline="true" variant="primary">primary</Badge>
</template>