Wensity

Badge

A compact status primitive for dashboards, filters, pricing, tables, cards, and settings. It includes neutral, success, warning, danger, info, brand, carbon, and outline treatments with token-aware shadows, hover states, focus states, optional icons, live dots, removable chips, sizes, and radius options.

badgestatuschippilllabelmetadatafilterremovabledotdashboardfeedback
Loading preview...

Examples

Practical examples and common states for the same installable component.

Status Stack

Subtle color, shape, and shadow changes for readable state.

examples/badge-status.tsx
import {
  IconCheck,
  IconClock,
  IconShieldCheck,
  IconX,
} from "@tabler/icons-react";
import { Badge } from "@/components/wensity/badge";


export function StatusBadges() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="success" leftIcon={<IconCheck />} interactive>
        Synced
      </Badge>
      <Badge variant="warning" leftIcon={<IconClock />} interactive>
        Queued
      </Badge>
      <Badge variant="info" leftIcon={<IconShieldCheck />} interactive>
        Protected
      </Badge>
      <Badge variant="danger" leftIcon={<IconX />} interactive>
        Blocked
      </Badge>
    </div>
  );
}

Filter Chips

Removable badges for search, filters, and saved views.

examples/badge-filter-chips.tsx
"use client";


import * as React from "react";
import { IconFilter } from "@tabler/icons-react";
import { Badge } from "@/components/wensity/badge";
import { Button } from "@/components/wensity/button";


export function FilterChips() {
  const [chips, setChips] = React.useState(["Free", "React", "Animated"]);


  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="outline" leftIcon={<IconFilter />}>
        Components
      </Badge>
      {chips.map((chip) => (
        <Badge
          key={chip}
          variant={chip === "Animated" ? "brand" : "neutral"}
          onRemove={() =>
            setChips((current) => current.filter((item) => item !== chip))
          }
          removeLabel={`Remove ${chip}`}
        >
          {chip}
        </Badge>
      ))}
      {chips.length === 0 ? (
        <Button
          size="sm"
          variant="secondary"
          onClick={() => setChips(["Free", "React", "Animated"])}
        >
          Reset filters
        </Button>
      ) : null}
    </div>
  );
}

Plan Labels

Small commercial labels with enough polish for pricing and account UI.

examples/badge-plan.tsx
import { IconLock, IconStar } from "@tabler/icons-react";
import { Badge } from "@/components/wensity/badge";


export function PlanBadges() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="neutral" size="sm">
        Starter
      </Badge>
      <Badge variant="brand" size="sm" leftIcon={<IconStar />}>
        Pro
      </Badge>
      <Badge variant="carbon" size="sm" leftIcon={<IconLock />}>
        Team
      </Badge>
    </div>
  );
}

Live States

Dot badges for uptime, queues, streaming, and async work.

examples/badge-live.tsx
import { Badge } from "@/components/wensity/badge";


export function LiveBadges() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="success" dot pulseDot>
        Online
      </Badge>
      <Badge variant="warning" dot>
        Delayed
      </Badge>
      <Badge variant="danger" dot>
        Paused
      </Badge>
    </div>
  );
}

Icon Badges

Icon slots preserve rhythm without turning badges into buttons.

examples/badge-icons.tsx
import {
  IconArrowUpRight,
  IconBolt,
  IconDatabase,
  IconPlayerPlay,
  IconSparkles,
} from "@tabler/icons-react";
import { Badge } from "@/components/wensity/badge";


export function IconBadges() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="brand" leftIcon={<IconSparkles />} interactive>
        Fresh
      </Badge>
      <Badge variant="info" leftIcon={<IconDatabase />} interactive>
        Synced
      </Badge>
      <Badge variant="warning" leftIcon={<IconBolt />} interactive>
        Usage high
      </Badge>
      <Badge
        variant="carbon"
        leftIcon={<IconPlayerPlay />}
        rightIcon={<IconArrowUpRight />}
        interactive
      >
        Launch
      </Badge>
    </div>
  );
}

Sizes

Three sizes that keep text, icons, and dots aligned.

examples/badge-sizes.tsx
import { IconFlame, IconShieldCheck } from "@tabler/icons-react";
import { Badge } from "@/components/wensity/badge";


export function BadgeSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="sm" variant="success" dot>
        Small
      </Badge>
      <Badge size="md" variant="brand" leftIcon={<IconFlame />}>
        Default
      </Badge>
      <Badge size="lg" variant="carbon" leftIcon={<IconShieldCheck />}>
        Large
      </Badge>
    </div>
  );
}

Shapes

Different radius options for compact, app, and pill contexts.

examples/badge-shapes.tsx
import { Badge } from "@/components/wensity/badge";


export function BadgeShapes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge radius="sm" variant="outline">
        Square
      </Badge>
      <Badge radius="md" variant="info">
        Rounded
      </Badge>
      <Badge radius="pill" variant="success" dot>
        Pill
      </Badge>
    </div>
  );
}