Badge

 1import {
 2  IconCheck,
 3  IconClock,
 4  IconShieldCheck,
 5  IconX,
 6} from "@tabler/icons-react";
 7import { Badge } from "@/components/wensity/badge";
 8
 9export function StatusBadges() {
10  return (
11    <div className="flex flex-wrap gap-2">
12      <Badge variant="success" leftIcon={<IconCheck />} interactive>
13        Synced
14      </Badge>
15      <Badge variant="warning" leftIcon={<IconClock />} interactive>
16        Queued
17      </Badge>
18      <Badge variant="info" leftIcon={<IconShieldCheck />} interactive>
19        Protected
20      </Badge>
21      <Badge variant="danger" leftIcon={<IconX />} interactive>
22        Blocked
23      </Badge>
24    </div>
25  );
26}

 1"use client";
 2
 3import * as React from "react";
 4import { IconFilter } from "@tabler/icons-react";
 5import { Badge } from "@/components/wensity/badge";
 6import { Button } from "@/components/wensity/button";
 7
 8export function FilterChips() {
 9  const [chips, setChips] = React.useState(["Free", "React", "Animated"]);
10
11  return (
12    <div className="flex flex-wrap gap-2">
13      <Badge variant="outline" leftIcon={<IconFilter />}>
14        Components
15      </Badge>
16      {chips.map((chip) => (
17        <Badge
18          key={chip}
19          variant={chip === "Animated" ? "brand" : "neutral"}
20          onRemove={() =>
21            setChips((current) => current.filter((item) => item !== chip))
22          }
23          removeLabel={`Remove ${chip}`}
24        >
25          {chip}
26        </Badge>
27      ))}
28      {chips.length === 0 ? (
29        <Button
30          size="sm"
31          variant="secondary"
32          onClick={() => setChips(["Free", "React", "Animated"])}
33        >
34          Reset filters
35        </Button>
36      ) : null}
37    </div>
38  );
39}

 1import { IconLock, IconStar } from "@tabler/icons-react";
 2import { Badge } from "@/components/wensity/badge";
 3
 4export function PlanBadges() {
 5  return (
 6    <div className="flex flex-wrap gap-2">
 7      <Badge variant="neutral" size="sm">
 8        Starter
 9      </Badge>
10      <Badge variant="brand" size="sm" leftIcon={<IconStar />}>
11        Pro
12      </Badge>
13      <Badge variant="carbon" size="sm" leftIcon={<IconLock />}>
14        Team
15      </Badge>
16    </div>
17  );
18}

 1import { Badge } from "@/components/wensity/badge";
 2
 3export function LiveBadges() {
 4  return (
 5    <div className="flex flex-wrap gap-2">
 6      <Badge variant="success" dot pulseDot>
 7        Online
 8      </Badge>
 9      <Badge variant="warning" dot>
10        Delayed
11      </Badge>
12      <Badge variant="danger" dot>
13        Paused
14      </Badge>
15    </div>
16  );
17}

 1import {
 2  IconArrowUpRight,
 3  IconBolt,
 4  IconDatabase,
 5  IconPlayerPlay,
 6  IconSparkles,
 7} from "@tabler/icons-react";
 8import { Badge } from "@/components/wensity/badge";
 9
10export function IconBadges() {
11  return (
12    <div className="flex flex-wrap gap-2">
13      <Badge variant="brand" leftIcon={<IconSparkles />} interactive>
14        Fresh
15      </Badge>
16      <Badge variant="info" leftIcon={<IconDatabase />} interactive>
17        Synced
18      </Badge>
19      <Badge variant="warning" leftIcon={<IconBolt />} interactive>
20        Usage high
21      </Badge>
22      <Badge
23        variant="carbon"
24        leftIcon={<IconPlayerPlay />}
25        rightIcon={<IconArrowUpRight />}
26        interactive
27      >
28        Launch
29      </Badge>
30    </div>
31  );
32}

 1import { IconFlame, IconShieldCheck } from "@tabler/icons-react";
 2import { Badge } from "@/components/wensity/badge";
 3
 4export function BadgeSizes() {
 5  return (
 6    <div className="flex flex-wrap items-center gap-2">
 7      <Badge size="sm" variant="success" dot>
 8        Small
 9      </Badge>
10      <Badge size="md" variant="brand" leftIcon={<IconFlame />}>
11        Default
12      </Badge>
13      <Badge size="lg" variant="carbon" leftIcon={<IconShieldCheck />}>
14        Large
15      </Badge>
16    </div>
17  );
18}

 1import { Badge } from "@/components/wensity/badge";
 2
 3export function BadgeShapes() {
 4  return (
 5    <div className="flex flex-wrap items-center gap-2">
 6      <Badge radius="sm" variant="outline">
 7        Square
 8      </Badge>
 9      <Badge radius="md" variant="info">
10        Rounded
11      </Badge>
12      <Badge radius="pill" variant="success" dot>
13        Pill
14      </Badge>
15    </div>
16  );
17}