Transitions
Transitions define how your state machine moves from one state to another. They're triggered by events like button clicks or system actions.
Basic Syntax
Transitions are defined using the arrow syntax event -> Target State. They must be indented under their parent state.
Login Screen *
submit -> Dashboard
forgot password -> Password Reset
Dashboard
logout -> Login ScreenEvent Names
Event names describe what triggers the transition. Use descriptive names that match user actions or system events.
GOOD
- submit
- cancel
- timeout
- payment success
AVOID
- go
- click
- next
- x
Multiple Transitions
A state can have multiple transitions to different target states:
Payment
success -> Confirmation
failure -> Error
cancel -> Cart
timeout -> ErrorSelf Transitions
A state can transition to itself, useful for retry logic or refresh actions:
Loading
retry -> Loading
success -> Ready
error -> ErrorTransitions in Nested States
Transitions can target states at any level. Use the full path for clarity when targeting nested states.
App
Screen A *
next -> Screen B/Form
Screen B
Form *
submit -> Success
Success
done -> Screen ANote
When transitioning to a state with children, the initial child state (marked with
*) becomes active.