Badge
Introduction
The Badge component is used to highlight small amounts of information, such as tags, statuses, or counts.
- Supports multiple preset colors
- Supports multiple sizes
- Supports outline style
Usage Examples
Different tabs demonstrate various Badge usage scenarios:
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>
Sizes
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>
Outline
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 Component
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>