Badge

Secondary

Destructive

Outline

Verified

8

99

20+

Installation

pnpm dlx kliping@latest add badge

Usage

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge variant="default | outline | secondary | destructive">
    Badge
  </Badge>
</template>

Link

Pakai prop as-child untuk membuat komponen lain tampil seperti badge. Berikut contoh tautan yang tampil seperti badge.

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge as-child>
    <a href="#">Badge</a>
  </Badge>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, class-variance-authority@^0.7.1, reka-ui@^2.10.3
Files	components/ui/badge/badge.vue components/ui/badge/index.ts

API Reference

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
variant?	"default" | "destructive" | "outline" | "secondary"	—	The visual style.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"badge"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --border, --destructive, --foreground, --primary, --primary-foreground, --ring, --secondary, --secondary-foreground.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.