Components→Badge

Badge

Motion-first badge with multiple variants, icons, pulse animation, and removable functionality. Includes NotificationBadge for counts and status indicators.

Data Display

DefaultSecondarySuccessWarningErrorInfoOutline

SmallMediumLarge

🔥With iconLive statusRemovable

Installation

Copy and paste

Copy the component source code and paste it into your project.

import { Badge, NotificationBadge, AnimatedBadge } from "driftkit";

Props

Name	Type	Required	Description
`variant`	`"default" \| "secondary" \| "success" \| "warning" \| "error" \| "info" \| "outline"`	No	Visual variant with different background colors and borders. Success is green, error is red, warning is amber, etc.
`size`	`"sm" \| "md" \| "lg"`	No	Badge size affecting padding and text size.
`icon`	`ReactNode`	No	Optional icon displayed before the text. Automatically sized based on badge size.
`pulse`	`boolean`	No	Shows animated pulse dot for live status indicators.
`removable`	`boolean`	No	Shows remove button (×) with hover effects. Use with onRemove callback.
`onRemove`	`() => void`	No	Callback when remove button is clicked. Only works when removable is true.
`children`	`ReactNode`	Yes	Badge content - typically short text or numbers.

🎮

Playground

Tune spring physics for this component

Live Preview

🔔

Spring Physics

StiffnessiHow quickly the animation reaches its target. Higher values create snappier animations.300

DampingiHow much the animation resists motion. Lower values create more bounce and overshoot.30

MassiHow heavy the element feels during animation. Higher values make animations slower with more momentum.1

Generated Code

const springConfig = {
  "type": "spring",
  "stiffness": 300,
  "damping": 30,
  "mass": 1
};

// Basic hover animation
<motion.div
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={springConfig}
>
  <Badge />
</motion.div>

// Advanced with custom animations
<motion.div
  animate={{ 
    scale: [1, 1.02, 1],
    y: [0, -4, 0]
  }}
  transition={{
    ...springConfig,
    repeat: Infinity,
    repeatDelay: 2
  }}
>
  <Badge />
</motion.div>

Stiffness: Controls animation speed. Higher values create snappier animations.

Damping: Controls resistance to motion. Lower values create more bounce and overshoot.

Mass: Controls the perceived weight. Higher values make animations slower with more momentum.

Source Code

View the source code on GitHub to see the full implementation.

View on GitHub