Badge

Displays a badge or a component that looks like a badge.

Examples

Default

Badge

<script setup>
import { Badge } from '@empathyds/vue'
</script>

<Badge>Badge</Badge>

Secondary

Secondary

<script setup>
import { Badge } from '@empathyds/vue'
</script>

<Badge variant="secondary">Secondary</Badge>

Destructive

Destructive

<script setup>
import { Badge } from '@empathyds/vue'
</script>

<Badge variant="destructive">Destructive</Badge>

Outline

Outline

<script setup>
import { Badge } from '@empathyds/vue'
</script>

<Badge variant="outline">Outline</Badge>

Props

Badge

Prop	Type	Default	Description
variant	default | secondary | destructive | outline	default	The visual style of the badge.

Slots

Badge

Slot	Description
default	The content of the badge.