Badge

Data Display

Animated badge component with multiple variants, status indicators, and interactive tag patterns.

Dependencies:

framer-motion

Full

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { Badge } from '@/components/Badge'

Related Components

FeatureCard

Animated feature card with hover effects, icon, and accent borders.

StatsCounter

Animated number counter that counts up when the element enters the viewport.

CodeBlock

Syntax-highlighted code block with copy button and optional line numbers.

← Back to Components

Badge

Data Display

Animated badge component with multiple variants, status indicators, and interactive tag patterns.

Dependencies:

framer-motion

Full

Variants

DefaultSuccessWarningErrorInfoOutline

With Dots

OnlineLiveAwayOffline

Sizes

SmallMediumLarge

Removable

FeatureBugEnhancement

Selectable Tags

Selected: React

Status Use Cases

John Doe

Online

Jane Smith

Away

Bob Wilson

Offline