Components
Badge New · experimental
shadcn's Badge. A badge that's a link or a button swells by about a pixel on hover, with a soft gooey overshoot. A plain badge stays still.
Customize
GoopBadge is shadcn-vue's Badge, with the same variants and classes. as and asChild come from reka-ui's Primitive, so a badge can render as a link, a button, or your router link.
Installation
Install @goopui/nuxt or @goopui/vue as shown on the Button page. The Nuxt module auto-imports GoopBadge.
Usage
<script setup lang="ts">
// Nuxt auto-imports this. In plain Vue, import it:
import { GoopBadge } from '@goopui/vue'
</script>
<template>
<GoopBadge>Badge</GoopBadge>
<GoopBadge as-child>
<a href="/changelog">Changelog</a>
</GoopBadge>
</template>
What it does
- swell. When the badge is a link or a button, hovering it grows a ring in its own colour by about 1px (on the playful preset), with a soft overshoot, so the badge plumps up like a drop of goo. The outline variant swells its border.
A badge that isn't interactive never moves. The swell is a CSS transition on Tailwind's shadow, so the focus ring still works alongside it.
Variants
The same variants as shadcn:
<GoopBadge>Badge</GoopBadge>
<GoopBadge variant="secondary">Secondary</GoopBadge>
<GoopBadge variant="destructive">Destructive</GoopBadge>
<GoopBadge variant="outline">Outline</GoopBadge>
Turn the swell off with :swell="false", or scale it with a number (:swell="2" is about 2px).
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'default' | Same as shadcn. |
class | string | array | object | Merged onto the root. | |
asChild, as | The element to render, via reka-ui. | ||
swell | boolean | number | true | A link or button badge swells ~1px on hover with a soft overshoot. A number scales it. A plain badge never moves. |
speed | number | 1 | Animation speed multiplier. |
preset | 'subtle' | 'playful' | 'wild' | app config, then playful | The feel. |
Accessibility
The badge is whatever element you render. A link badge is a real <a>, with your focus ring. Under reduced motion the swell is off. See Accessibility & reduced motion.