Status state
Whole-area status display: a centred icon, headline, and supporting text for in-page status (loading, error, blocked).
Loading
Posting payroll for June
187 payslips · estimated 14 seconds
Error
Couldn’t post payroll · NSSA reference rejected
3 employees have no NSSA number on file. Fix them and try again.
Blocked
You don’t have access to this surface
Ask Robert Mukamba (Owner) to grant Accountant role.
Do & don't
Do
Use status states for whole pages. Use empty state for inside a card.
Don't
Make the user search for what to do next. Always give a button.
Do
Tone-match the icon — danger red for errors, neutral grey for blocked.
Don't
Show "Something went wrong". Tell the operator what specifically broke.