Priority Icon

Install

pnpm dlx shadcn@latest add @vegastack/priority-icon

Usage

import { PriorityIcon } from "@/components/ui/priority-icon";

<PriorityIcon priority="high" size="sm" />;

Examples

Levels

A lucide Flag per level: urgent (filled, destructive), high (filled, warning), medium (filled, info), low (outline, muted) and none (dashed outline, muted). The fill backs up the colour so the level never rests on colour alone.

Sizes

The same xs (14px), sm (16px), md (20px) and lg (24px) steps as StatusIcon.

Every level at every size:

Priority menu recipe

Compose DropdownMenu + PriorityIcon + DropdownMenuShortcut — there is no picker component. While the menu is open, 1 / 2 / 3 / 4 / 0 pick Urgent / High / Medium / Low / No priority.

<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger
    render={
      <Button
        variant="ghost"
        size="icon-sm"
        aria-label={`Priority: ${label}`}
      />
    }
  >
    <PriorityIcon priority={priority} size="sm" label="" />
  </DropdownMenuTrigger>
  <DropdownMenuContent onKeyDown={pickByShortcut}>
    {PRIORITIES.map((p) => (
      <DropdownMenuItem key={p.value} onClick={() => setPriority(p.value)}>
        <PriorityIcon priority={p.value} size="sm" label="" />
        {p.label}
        <DropdownMenuShortcut>{p.key}</DropdownMenuShortcut>
      </DropdownMenuItem>
    ))}
  </DropdownMenuContent>
</DropdownMenu>

In Select and Combobox options

API Reference

Accessibility

• Renders role="img" with an aria-label such as "High priority"; override with label.
• Pass label="" when adjacent text names the priority, making the icon decorative (aria-hidden).
• Filled, outline and dashed fills distinguish the levels without relying on colour.

Do / Don't