Personizely UI

Appearance

Badge ​

Badge to show some collateral info about something.

Examples ​

Basic badge ​

Badge

Code

vue
<template>
  <Badge>Badge</Badge>
</template>

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

Secondary badge ​

Badge

Code

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

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

Outlined badge ​

Badge

Code

vue
<template>
  <Badge variant="outline">
    Badge
  </Badge>
</template>

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

Destructive badge ​

Badge

Code

vue
<template>
  <Badge variant="destructive">
    Badge
  </Badge>
</template>

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