Components

Floating Badges

Elegant, customizable badges with gradient backgrounds and dot indicators. Perfect for highlighting important information with a modern, eye-catching appearance.

Floating Badge Component

Basic Examples

Senior

New

Featured

Pro

Premium

Size Variations

Small

Default

Large

Dot Variations

No Dot

White Dot

Green Dot

Red Dot

Pulsing Dot

Component Documentation

Prop	Type	Default Value	Description
label	string	"Badge"	Text to display in the badge
showDot	string	true	Whether to show the dot indicator
dotSize	string	"h-1.5 w-1.5 sm:h-2 sm:w-2"	Size of the dot indicator
dotColor	string	"bg-white"	Color of the dot indicator
dotClassName	string	""	Additional classes for the dot
fontSize	string	"text-[9px] sm:text-[10px]"	Font size for the text
fontWeight	string	"font-medium"	Font weight for the text
textTransform	string	"uppercase"	Text transformation (uppercase, lowercase, etc.)
letterSpacing	string	"tracking-widest"	Letter spacing for the text
textColor	string	"text-white dark:text-white"	Text color for the badge
padding	string	"px-3 py-1 sm:px-4 sm:py-1.5"	Padding for the badge
gradient	string	"from-indigo-600/95 via-primary-500/95 to-purple-600/95"	Gradient for light mode
darkGradient	string	"dark:from-indigo-500/95 dark:via-primary-400/95 dark:to-purple-500/95"	Gradient for dark mode
border	string	"border border-white/30 dark:border-white/10"	Border style for the badge
hoverBorder	string	"hover:border-white/40"	Border style on hover
rounded	string	"rounded-full"	Border radius style
shadow	string	"shadow-lg shadow-indigo-500/20 dark:shadow-indigo-500/30"	Shadow style
hoverShadow	string	"hover:shadow-xl"	Shadow style on hover
hoverScale	string	"hover:scale-105"	Scale effect on hover
transition	string	"transition-all duration-300"	Transition effect for animations
backdropBlur	string	"backdrop-blur-md"	Backdrop blur effect
className	string	""	Additional CSS classes
onClick	string	null	Click event handler

Usage Example

jsx

import React from "react";
import FloatingBadge from "@/tailwind/foraui/components/badges/FloatingBadge";

export default function BadgeShowcase() {
  // Badge configurations to showcase different styles
  const badgeConfigs = [
    {
      label: "Senior",
      gradient: "from-indigo-600/95 via-primary-500/95 to-purple-600/95",
      darkGradient: "dark:from-indigo-500/95 dark:via-primary-400/95 dark:to-purple-500/95",
      shadow: "shadow-lg shadow-indigo-500/20 dark:shadow-indigo-500/30",
    },
    {
      label: "New",
      gradient: "from-green-600/95 via-emerald-500/95 to-teal-600/95",
      darkGradient: "dark:from-green-500/95 dark:via-emerald-400/95 dark:to-teal-500/95",
      shadow: "shadow-lg shadow-green-500/20 dark:shadow-green-500/30",
    },
    {
      label: "Featured",
      gradient: "from-amber-600/95 via-orange-500/95 to-red-600/95",
      darkGradient: "dark:from-amber-500/95 dark:via-orange-400/95 dark:to-red-500/95",
      shadow: "shadow-lg shadow-amber-500/20 dark:shadow-amber-500/30",
    },
  ];

  return (
    <div className="w-full p-6 bg-white dark:bg-gray-900 rounded-xl">
      <h2 className="text-xl font-bold mb-6 text-gray-900 dark:text-white">
        Badge Examples
      </h2>

      {/* Basic badges */}
      <div className="mb-8">
        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">
          Basic Examples
        </h3>
        <div className="flex flex-wrap gap-4">
          {badgeConfigs.map((config, index) => (
            <FloatingBadge
              key={index}
              label={config.label}
              gradient={config.gradient}
              darkGradient={config.darkGradient}
              shadow={config.shadow}
            />
          ))}
        </div>
      </div>

      {/* Size variations */}
      <div className="mb-8">
        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">
          Size Variations
        </h3>
        <div className="flex flex-wrap items-center gap-4">
          <FloatingBadge
            label="Small"
            padding="px-2 py-0.5 sm:px-3 sm:py-1"
            fontSize="text-[8px] sm:text-[9px]"
            dotSize="h-1 w-1 sm:h-1.5 sm:w-1.5"
          />
          <FloatingBadge label="Default" />
          <FloatingBadge
            label="Large"
            padding="px-4 py-1.5 sm:px-5 sm:py-2"
            fontSize="text-[10px] sm:text-xs"
            dotSize="h-2 w-2 sm:h-2.5 sm:w-2.5"
          />
        </div>
      </div>

      {/* Dot variations */}
      <div>
        <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">
          Dot Variations
        </h3>
        <div className="flex flex-wrap gap-4">
          <FloatingBadge label="No Dot" showDot={false} />
          <FloatingBadge label="White Dot" dotColor="bg-white" />
          <FloatingBadge label="Green Dot" dotColor="bg-green-400" />
          <FloatingBadge label="Red Dot" dotColor="bg-red-400" />
          <FloatingBadge label="Pulsing Dot" dotClassName="animate-pulse" />
        </div>
      </div>
    </div>
  );
}