Settings Page
Where an app's settings live: a list of their parts beside the one that's open, fields that save together, switches that take effect at once, and what can't be undone kept apart at the end. Made only of Canon's components. Change a field and try to leave, save, flip a switch, or try to delete the workspace.
The pattern
An App Shell whose page is the settings (its sidebar a rail, for the room): a Page Header, then the settings' own Nav List beside the part that's open (above it, in a row, when there isn't room for both). In an app, each part is its own address: /settings/general, /settings/notifications.
Settings
The Globex Billing workspace, for everyone in it.
General
The workspace's name, where it is, and how its invoices look.
Danger zone
Changes that can't be undone.
- Export all data
- Every invoice, customer and payment, as CSV files.
- Delete this workspace
- Removes it for everyone, with its invoices and customers.
Notifications
Yours alone. Each switch takes effect as soon as it's flipped.
Sent to ada@globex.example.
With the amount and how it was paid.
Monday morning: what was sent, paid and still owed.
In the app
Members
Who's in the workspace, and what they can do.
Not in this demo
A Data Table of members, with roles, would go here.
Billing
The plan, the card on file, past receipts.
Not in this demo
Cards for the plan and the payment method would go here.
Two ways to save
Fields that belong together save together. General is a Form Layout with data-layout="aside" (each section's title in a side column, its fields beside it) that ends in a Save Bar: it counts the changes, keeps Save unavailable until there are some, saves with ⌘S, and asks before the changes are lost, here when leaving for another part.
A setting on its own takes effect at once. Notifications are Switches: flipping one is the change, and a Toast says so. No Save button, no "unsaved changes".
Never both in one part: a switch beside fields that wait for Save leaves people unsure what's saved. Within a form that saves, a yes-or-no is a Checkbox (Add late fees), not a Switch.
The danger zone
What can't be undone goes last, apart from the form, in a section that says so: a Description List whose items each say what happens and end with their Button. Deleting asks in an alert Dialog that names what goes (the workspace, its invoices, its customers), and only deletes once the workspace's name is typed: the button stays unavailable (aria-disabled) until then.
Narrow
Without room for both, the settings' Nav List goes above the part, its links in a row, so the form keeps its width. Narrower still, the aside layout puts each section's title over its fields (Form Layout does that by itself below 40rem).