Priority Badge

A priority badge for task items.

Low

1
import { useState } from "react";
2

3
import { PriorityBadge } from "@/components/features/pxl/tasks/priority-badge";
4

5
export default function PriorityBadgeDemo() {
6
  const [priority, setPriority] = useState<"low" | "normal" | "high">("low");
7

8
  const toggle = () => {
9
    setPriority(
10
      priority === "low"
11
        ? "normal"
12
        : priority === "normal"
13
          ? "high"
14
          : "low",
15
    );
16
  };
17

18
  return (
19
    <div className="flex flex-col gap-4">
20
      <PriorityBadge onClick={toggle} value={priority} />
21
    </div>
22
  );
23
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/tasks/priority-badge

Copy and paste the following code into your project.

1
import type { ComponentProps } from "react";
2

3
import { Badge } from "@/components/ui/pxl/badge";
4
import type { TaskNotes } from "@/lib/schemas/pxl/tasknotes";
5

6
type Priority = "low" | "high" | "normal";
7

8
const priorityVariants: Record<
9
  Priority,
10
  NonNullable<ComponentProps<typeof Badge>["variant"]>
11
> = {
12
  low: "muted",
13
  high: "danger",
14
  normal: "primary",
15
};
16

17
const priorityLabels: Record<
18
  Priority,
19
  string
20
> = {
21
  low: "Low",
22
  high: "High",
23
  normal: "Normal"
24
}
25

26
function PriorityBadge({
27
  labels = priorityLabels,
28
  showLabel = true,
29
  value,
30
  ...props
31
}: ComponentProps<typeof Badge> & {
32
  labels?: Record<Priority, string>;
33
  showLabel?: boolean;
34
  value: Priority;
35
}) {
36
  return (
37
    <Badge variant={priorityVariants[value]} {...props}>
38
      <svg
39
        xmlns="http://www.w3.org/2000/svg"
40
        fill="currentColor"
41
        viewBox="0 0 24 24"
42
        className="size-3 mr-0.5"
43
      >
44
        <path d="M6 4h14v2h-2v2h-2V6H6v6h10v-2h2v2h2v2H6v8H4V2h2v2Zm10 6h-2V8h2v2Z" />
45
      </svg>
46
      {showLabel && labels[value]}
47
    </Badge>
48
  );
49
}
50

51
function TaskNotesPriorityBadge({
52
  task,
53
  ...props
54
}: ComponentProps<typeof PriorityBadge> & {
55
  task: TaskNotes.Task;
56
}) {
57
  return <PriorityBadge {...props} value={task.priority === "none" ? "low" : task.priority} />;
58
}
59
PriorityBadge.TaskNotes = TaskNotesPriorityBadge;
60

61
export { PriorityBadge };

Update the import paths to match your project setup.

Usage

import { PriorityBadge } from "@/components/features/pxl/tasks/priority-badge";

<PriorityBadge value="high" />