logo
English

导航菜单

Documents
Vue

Badge

Introduction

The Badge Vue component is used to highlight small amounts of information, such as tags, statuses, or counts. This is the Vue implementation that provides a responsive interactive experience.

Component Features:

  • Supports multiple preset colors
  • Supports multiple sizes
  • Supports outline style
  • Responsive design that adapts to different screen sizes
  • Vue 3 Composition API support

Examples

默认PrimarySecondaryAccent
 
<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>

Props

class

Custom CSS class name for overriding default styles.

默认样式
自定义类名
圆角样式
阴影效果 
<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 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge :outline="true" variant="primary">primary</Badge>
</template>
primary
secondary
accent 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge :outline="true" variant="secondary">secondary</Badge>
</template>
primary
secondary
accent 
<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
987,654
987,654
987,654 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

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

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

<template>
    <Badge size="sm">987,654</Badge>
</template>
987,654
987,654
987,654
987,654 
<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 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge>default</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

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

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

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

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

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

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

<template>
    <Badge variant="warning">warning</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<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.

默认PrimarySecondaryAccent
 
<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>

搜索