KQ-878 · ROLE/BADGE

Role Badge

A role pill beside a member's name that morphs rather than swaps: the glyph and the word stack in one grid cell and cross-fade, the incoming glyph arriving from 0.6 on snap while the ink transitions on a colour tween. A promotion glints — a sheen sweeps the pill once while it lands from 1.06 on recoil — and a demotion only dims, because a demotion never celebrates. The pill opens the ladder as a real listbox in flow beneath the row, where arrows move, Enter chooses, and Escape returns focus to the pill.

KQ-878 · ROLE/BADGE

Marta Vieira@marta

Marta · Member · unchanged

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/role-badge

Props

value / defaultValue: string; default —; Controlled or initial role value; defaults to the first role.
onValueChange: (value: string) => void; default —; Fires with the chosen role's value.
onRoleChange: (change: RoleChange) => void; default —; Fires with { value, label, direction } where direction is promoted, demoted or changed.
roles: Role[]; default Guest / Member / Mod / Admin; The ladder, lowest rank first; { value, label, rank, description? }.
name: string; default —; The member's name, shown and spoken in the change sentence.
handle: string; default —; The member's handle, shown under the name.
editable: boolean; default true; False renders the pill as a label with no list and no tab stop.
disabled: boolean; default false; Holds the pill; the role still reads.
open / defaultOpen: boolean; default false; Controlled or initial state of the role list.
onOpenChange: (open: boolean) => void; default —; Fires as the list opens and closes.

Prop	Type	Default	Description
value / defaultValue	string	—	Controlled or initial role value; defaults to the first role.
onValueChange	(value: string) => void	—	Fires with the chosen role's value.
onRoleChange	(change: RoleChange) => void	—	Fires with { value, label, direction } where direction is promoted, demoted or changed.
roles	Role[]	Guest / Member / Mod / Admin	The ladder, lowest rank first; { value, label, rank, description? }.
name	string	—	The member's name, shown and spoken in the change sentence.
handle	string	—	The member's handle, shown under the name.
editable	boolean	true	False renders the pill as a label with no list and no tab stop.
disabled	boolean	false	Holds the pill; the role still reads.
open / defaultOpen	boolean	false	Controlled or initial state of the role list.
onOpenChange	(open: boolean) => void	—	Fires as the list opens and closes.