dashboard pattern

Edit

Form for updating an existing resource. Persistent autosave or explicit save.

When to use it

User clicks "Edit" or lands on /resources/:id/edit.

  • Save in 1 click
  • Discard returns to detail with no surprises
  • Unsaved changes warning on navigation

Layout regions

header
page-header
form
sticky-actions
Sticky bottom — Save / Cancel

States

default
Untouched
partial
Dirty
loading
Saving
success
Saved
error
Validation / server error

Example

<DashboardLayout><PageHeader /><Card><CardContent><Form>...</Form></CardContent></Card><StickyActions><Button variant="ghost">Cancel</Button><Button type="submit">Save changes</Button></StickyActions></DashboardLayout>

The full Edit pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Related

Build the Edit pattern in your project.