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

States

default
partial
loading
success
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.

Dashboard overview

List (table)

Detail

Build the Edit pattern in your project.

Get started