Clarify actions and responses after activation.
Review progress
Compare information and presentation in context of use.
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
Press the button when the network is slow and then press again. Respond to processing status early enough, avoid duplicate submissions, and use a label that indicates the result of the action rather than a generic word.
EXAMPLES
The “Save changes” button changes to “Saving…” during processing; When completed, display confirmation and allow editing to continue.
Use clear size scales for forms, toolbars, and actions on mobile.
Try longer labels and increase font size; button keeps the touch area without overflowing from the layout.
Example The "Confirm order" button is large on mobile; Filter button in toolbar.
By default, hover, focus, disabled and loading need their own markings, independent of each color.
Send once then click again while waiting; Tasks do not overlap and focus is still visible.
Example The button switches to “Saving...” while the request is processing.
Icon supports label meaning; The button only has an icon that needs an username and suggestions when needed.
Read the button name with a screen reader and try it on someone who doesn't know the icon.
Example The trash button has the aria-label “Delete draft”, not just “Delete”.
Distinguish primary, secondary, and dangerous actions with a consistent system.
Place two actions side by side; users need to realize the main step and consequences of deletion.
Example “Save changes” using the main button; “Cancel” uses the lighter button.
