PillBadge

pillbadge-1779393692572.tsx

'use client'
const VARIANTS = {
  success: { bg: '#d1fae5', color: '#065f46', dot: '#10b981' },
  error:   { bg: '#fee2e2', color: '#991b1b', dot: '#ef4444' },
  warning: { bg: '#fef3c7', color: '#92400e', dot: '#f59e0b' },
  info:    { bg: '#dbeafe', color: '#1e40af', dot: '#3b82f6' },
  purple:  { bg: '#ede9fe', color: '#5b21b6', dot: '#7c3aed' },
}

export default function PillBadge({ label = 'Active', variant = 'success' }) {
  const v = VARIANTS[variant] || VARIANTS.info
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: '6px',
      background: v.bg, color: v.color,
      padding: '4px 12px', borderRadius: '9999px',
      fontSize: '12px', fontWeight: 600,
    }}>
      <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: v.dot }} />
      {label}
    </span>
  )
}

Component info

CategoryBadges

Frameworkreact

TierFREE

Copies0

About

Colorful pill-shaped badge with multiple variants

More from Badges

'use client'
import { useState } from 'react'

export default function BadgeShowcase() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Next.js', 'Tailwind', 'Prisma'])
  const [count, setCount] = useState(12)

  return (
    <div style=

BadgeShowcase

Badges

'use client';
import { useState } from 'react';

export default function TechStackBadges() {
  const [hovered, setHovered] = useState(null);
  const stack = [
    { name: 'Next.js', icon: '▲', color: '#fff', desc: 'React framework' },
    { name: 'Ty

TechStackBadges

Badges

'use client'
import { useState, useEffect } from 'react'

export default function CounterBadge({ count = 0, max = 99, color = '#ef4444' }) {
  const [displayed, setDisplayed] = useState(0)
  useEffect(() => {
    const t = setTimeout(() => setDisplay

CounterBadge

Badges

'use client'
import { useState } from 'react'

const INIT_CHIPS = [
  { id:1, label:'React', icon:'⚛️', color:'#dbeafe', textColor:'#1d4ed8' },
  { id:2, label:'TypeScript', icon:'📘', color:'#ede9fe', textColor:'#6d28d9' },
  { id:3, label:'Tailwind

Chip

Badges