Accessible label element with 8 variants, 4 sizes, and 8 motion animations.
@akex/labelnpm install @akex/label
import { Label } from "@akex/label";
<Label htmlFor="email">Email address</Label>
<Label variant="success" size="sm">Active</Label>
<Label animation="glow">Live</Label>A glinting gradient sweep clips inside the label on a continuous loop — Aceternity-style polish.
animation="shimmer"Violet neon drop-shadow pulses in a 2 s loop; hover blazes it to maximum intensity with a double ring.
animation="glow"Endless gentle vertical levitation — clean and alive. Perfect for hero section badges.
animation="float"Stiff spring lifts the label on hover and presses it on tap. Snappy, tactile, non-distracting.
animation="bounce"Irregular opacity keyframes simulate a neon tube firing up. Atmospheric and retro-futuristic.
animation="flicker"Continuous scale heartbeat loop. Draws passive attention — ideal for "live", "new", or "beta" badges.
animation="pulse"Scales from 0 → 1 with a spring overshoot on mount; hover gives a small lift for ongoing interactivity.
animation="pop"Continuous hue-rotate + brightness filter shift makes the label color ripple like light through a prism.
animation="wave"| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | "default" | Visual style of the label |
| size | string | "default" | Text size |
| animation | LabelAnimation | — | "shimmer" | "glow" | "float" | "bounce" | "flicker" | "pulse" | "pop" | "wave" |
| htmlFor | string | — | Associates the label with a form input by id |
| className | string | — | Extra Tailwind classes |
| ...props | LabelHTMLAttributes | — | All native label element attributes |