Components
Save controls and persistence feedback
Separate an action being attempted from a confirmed save.
On this page
Purpose and composition
SaveButton presents a named save action and a relative timestamp. The course builder also has its own live queue status.
Anatomy
- Save button
- Saving label and disabled state
- Confirmed relative timestamp
Configuration and variants
| Input or variant | Contract |
|---|---|
| onClick | Async callback; local pending state lasts through finally. |
| isSaving | External pending state combines with the local latch. |
| lastSaved | Parent supplies a confirmed timestamp; the label refreshes every 30 seconds. |
States and feedback
Idle, saving, and saved appear together in the component board. Rejected writes must not create a new success timestamp.
Interaction and responsive behavior
A pending control prevents duplicate activation. SaveButton does not choose error wording or persist records itself. Builder auto-save is a distinct revision-aware queue.
Accessibility and known limits
Provide a visible failure and recovery action in the parent. Builder status uses aria-live; a changing relative timestamp alone is not a complete announcement strategy.
Source references
| File | Responsibility |
|---|---|
| src/components/SaveButton.tsx | Button state |
| src/hooks/useAutoSaveCourse.ts | Course save hook |
| src/app/make-class/[classId]/video-lessons/page.tsx | Lesson queue and live status |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0