Indicator

Display badges, dots, or labels on top of another element to show status, notifications, or counts.

Install Dependencies

npx quickcode-ui add Indicator

pnpm dlx quickcode-ui add Indicator

yarn dlx quickcode-ui add Indicator

bunx quickcode-ui add Indicator

Example

Basic Usage

99+

Positions

Sizes & Styles

Colors & Radius

New

Processing & Border

Live

With Avatar

Offset & Inline

Inline indicatorNew

Conditional Display

 "use client"
import { Indicator } from '@/components/ui/Indicator';
import { Button } from "@/components/ui/Button";

import { Mail, ShoppingCart, MessageSquare, Bell, User } from 'lucide-react';
import { useState } from 'react';

export default function IndicatorShowcase() {
  const [showIndicator, setShowIndicator] = useState(true);

  return (
    <div className="space-y-12 p-8">
      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">Basic Usage</h3>
        <div className="flex items-center gap-8">
          <Indicator label="5">
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Mail className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="99+">
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <ShoppingCart className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator dot>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <MessageSquare className="w-5 h-5" />
            </button>
          </Indicator>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">Positions</h3>
        <div className="flex items-start gap-8 flex-wrap">
          <div className="space-y-4">
            <div className="flex gap-4">
              <Indicator label="1" position="top-start">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
              <Indicator label="2" position="top-center">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
              <Indicator label="3" position="top-end">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
            </div>
            <div className="flex gap-4">
              <Indicator label="4" position="middle-start">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
              <Indicator label="5" position="middle-center">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
              <Indicator label="6" position="middle-end">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
            </div>
            <div className="flex gap-4">
              <Indicator label="7" position="bottom-start">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
              <Indicator label="8" position="bottom-center">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
              <Indicator label="9" position="bottom-end">
                <div className="w-16 h-16 bg-card border border-border rounded-lg" />
              </Indicator>
            </div>
          </div>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">Sizes & Styles</h3>
        <div className="flex items-center gap-8">
          <Indicator label="3" size={12}>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Bell className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="12" size={20}>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Bell className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="99" size={24}>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Bell className="w-5 h-5" />
            </button>
          </Indicator>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">Colors & Radius</h3>
        <div className="flex items-center gap-8">
          <Indicator label="New" color="bg-primary" radius="md">
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Mail className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="5" color="bg-green-500" radius="sm">
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <MessageSquare className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="!" color="bg-yellow-500" radius="none">
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Bell className="w-5 h-5" />
            </button>
          </Indicator>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">Processing & Border</h3>
        <div className="flex items-center gap-8">
          <Indicator dot processing>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <MessageSquare className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="Live" processing color="bg-red-500">
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Bell className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="12" withBorder>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <ShoppingCart className="w-5 h-5" />
            </button>
          </Indicator>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">With Avatar</h3>
        <div className="flex items-center gap-8">
          <Indicator dot color="bg-green-500" position="bottom-end">
            <div className="w-12 h-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-medium">
              <User className="w-6 h-6" />
            </div>
          </Indicator>

          <Indicator label="3" position="top-end">
            <div className="w-12 h-12 rounded-full bg-secondary text-secondary-foreground flex items-center justify-center font-medium">
              JD
            </div>
          </Indicator>

          <Indicator dot processing color="bg-green-500" position="bottom-end" withBorder>
            <div className="w-12 h-12 rounded-full bg-accent text-accent-foreground flex items-center justify-center font-medium">
              SK
            </div>
          </Indicator>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4 text-muted-foreground">Offset & Inline</h3>
        <div className="flex items-center gap-8">
          <Indicator label="5" offset={5}>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <Mail className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="10" offset={-5}>
            <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
              <ShoppingCart className="w-5 h-5" />
            </button>
          </Indicator>

          <Indicator label="New" inline>
            <span className="px-3 py-1.5 bg-card border border-border rounded-md text-sm">
              Inline indicator
            </span>
          </Indicator>
        </div>
      </div>


         <div>
          <h3 className="text-sm font-medium mb-4 text-muted-foreground">
            Conditional Display
          </h3>
          <div className="space-y-4">
            <div className="flex items-center gap-8">
              <Indicator label={0} showZero>
                <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
                  <Mail className="w-5 h-5" />
                </button>
              </Indicator>

              <div className="flex gap-4">
                <Indicator label="5" disabled={!showIndicator}>
                  <button className="p-3 bg-card border border-border rounded-lg hover:bg-accent transition-colors">
                    <Mail className="w-5 h-5" />
                  </button>
                </Indicator>

                <Button onClick={() => setShowIndicator(!showIndicator)}>
                  {showIndicator ? "Hide" : "Show"} Indicator
                </Button>
              </div>
            </div>
          </div>
        </div>

     
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The element to wrap with the indicator
`label`	`React.ReactNode`	—	Content to display in the indicator (number, text, icon)
`showZero`	`boolean`	`false`	Show indicator when label is 0
`dot`	`boolean`	`false`	Display as a dot without label
`inline`	`boolean`	`false`	Display inline instead of flex
`size`	`number \| string`	`16`	Size of the indicator in pixels or custom value
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'full'`	Border radius of the indicator
`color`	`string`	`'bg-destructive'`	Background color class for the indicator
`position`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'middle-center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'top-end'`	Position of the indicator relative to children
`offset`	`number`	`0`	Offset in pixels to adjust indicator position
`disabled`	`boolean`	`false`	Hide the indicator
`processing`	`boolean`	`false`	Add pulsing animation to indicate processing state
`withBorder`	`boolean`	`false`	Add border around indicator for better contrast
`zIndex`	`number`	`200`	Z-index value for the indicator
`className`	`string`	—	Additional CSS classes for the wrapper element