Save draft

Design the save-draft control for a content editor. Place it where users will notice it during editing, without making it compete with the primary workflow. This is not a full editor; focus on the save affordance and the feedback around it.

Show the default unsaved state, the in-progress saving state, and the saved confirmation state. The user should be able to tell at a glance whether their draft is still changing, has been saved, or needs attention. Keep the language short and specific.

Include one failure state for when saving does not complete. Preserve the user's entered content, explain what happened in plain language, and provide a clear retry action. If you add motion or icon changes, they should support the status change, not replace it.

Animate the save button to briefly glow or change form after a draft is saved; this creates a rewarding feeling for the user.