KQ-506 · PRIORITY/FLAG
Priority Flag
Priority drawn as a signal mast: the flag climbs to the chosen rung on glide while its colour tweens up the muted → warn → danger ramp. Landing on the top rung it flutters once, a single two-keyframe skew on recoil. Up and Down step the mast and wrap, Home and End jump to the ends, Space and Enter select.
KQ-506 · PRIORITY/FLAG
Coldbrook · ticket 4412Card reader offline at Pier 3
Priority
Medium · first response 24h
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/priority-flag
Props
- value / defaultValue
- string
- default "low"
- Controlled or initial level — low, medium, high or urgent by default.
- onValueChange
- (value: string) => void
- default —
- Fires when the level changes, by pointer or by key.
- levels
- PriorityLevel[]
- default low / medium / high / urgent
- Overrides the rungs, ordered bottom to top; the colour ramp stretches to fit.
- label
- React.ReactNode
- default —
- Visible group label. Omit it and pass aria-label to label the group invisibly.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | "low" | Controlled or initial level — low, medium, high or urgent by default. |
| onValueChange | (value: string) => void | — | Fires when the level changes, by pointer or by key. |
| levels | PriorityLevel[] | low / medium / high / urgent | Overrides the rungs, ordered bottom to top; the colour ramp stretches to fit. |
| label | React.ReactNode | — | Visible group label. Omit it and pass aria-label to label the group invisibly. |