Components
- Accordion new
- ActionSheet new
- Alert new
- Alert Dialog new
- Angle Slider new
- Autocomplete new
- Avatar new
- Badge new
- Breadcrumb new
- Button new
- Button Group new
- Card new
- Carousel new
- Checkbox new
- Clipboard new
- Collapsible new
- Color Picker new
- Date Input new
- Date Picker new
- Dialog new
- DialogCaller new
- Drawer beta
- Editable new
- Empty new
- Field new
- Fieldset new
- File Upload new
- Filters new
- Floating Panel new
- Hover Card new
- Image new
- Image Cropper new
- Input new
- Input Group new
- Json Tree View new
- Kbd new
- Listbox new
- Marquee new
- Menu new
- Number Input new
- Pagination new
- Password Input new
- PhoneField new
- Pin Input new
- Popover new
- Progress Circular new
- Progress Linear new
- Qr Code new
- Radio Group new
- Rating Group new
- Scroll Area new
- ScrollSpy new
- Segment Group new
- Select new
- Separator new
- Sidebar new
- Signature Pad new
- Skeleton new
- Slider new
- Splitter new
- Steps new
- Switch new
- Table new
- Tabs new
- Tags Input new
- Textarea new
- Timeline new
- Timer new
- Toast new
- Toc new
- Toggle new
- Toggle Group new
- Tooltip new
- Tour new
- Tree View new
- Typography new
Badge
Vue badge for compact status labels, counts, and categorical tags next to text or controls.
Installation
Install from the Vuzeno registry:
bunx --bun shadcn-vue@latest add https://vuzeno.com/r/badge.json
npx shadcn-vue@latest add https://vuzeno.com/r/badge.json
yarn dlx shadcn-vue@latest add https://vuzeno.com/r/badge.json
pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/badge.json
Usage
<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
</script>
<template>
<Badge variant="secondary">Badge</Badge>
</template>
Examples
Variants
Use the variant prop to change the visual style of the badge.