getPriorityOptions

Returns the three built-in priority options. Each option includes an id, label, and css class that wires into the default priority chip colors.

Usage

import { getPriorityOptions } from "@svar-ui/react-kanban";

function getPriorityOptions(): { id: number; label: string; css: string }[];

Returns:

[
	{ id: 1, label: "Low", css: "wx-card-priority-low" },
	{ id: 2, label: "Medium", css: "wx-card-priority-medium" },
	{ id: 3, label: "High", css: "wx-card-priority-high" },
];

Field	Type	Description
id	number	Priority level identifier
label	string	Display text
css	string	CSS class applied to the priority chip on cards

The css classes map to --wx-kanban-priority-{low,medium,high}-bg and --wx-kanban-priority-{low,medium,high}-color theme variables.

Example

Use as the default priority.data on the card shape:

import { Kanban, getCardShape, getPriorityOptions } from "@svar-ui/react-kanban";

const card = {
  ...getCardShape(),
  priority: { data: getPriorityOptions() },
};

<Kanban cards={cards} columns={columns} card={card} />

Extend with a custom level:

import { Kanban, getCardShape, getPriorityOptions } from "@svar-ui/react-kanban";

const priorities = [
  ...getPriorityOptions(),
  { id: 4, label: "Critical", css: "priority-critical" },
];

const card = {
  ...getCardShape(),
  priority: { data: priorities },
};

<Kanban cards={cards} columns={columns} card={card} />

Related

• card - pass priority data via card.priority.data
• getEditorItems - uses these options as the default priority richselect data
• Themes guide - priority CSS variables