Status Lozenge Transition Menu

ProNew

A status lozenge that opens a menu of only the transitions the workflow allows from the current state, with the others hidden rather than disabled.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

current

Guide and examples

When to use it

Use this when status changes follow rules (a state machine) and showing impossible options would only lead to errors.

Do not use it when any status can be set at any time (use Inline Edit Status Picker).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`states`	`WorkflowState[]`	required	-
`current`	`string`	required	-
`onTransition`	`(to: string) => void \| Promise<void>`	required	-

Accessibility

The lozenge is the menu button; its name says the current status and that it can change.
Only allowed transitions are in the menu; a final state is plain text with a "final" name.
Menu keyboard behaviour comes from the dropdown menu primitive.

Testing

The pattern ships with a Testing Library test (status-lozenge-transition-menu.test.tsx) that covers allowed states only, transitioning, the final state and keyboard opening.