Settings
Settings pages let users control their experience. Group related controls, surface destructive actions clearly, and always confirm before irreversible changes.
Interactive Example
A settings page with appearance controls, notification toggles, and a danger zone. All controls are live.
Settings
Appearance
Theme
Notifications
Email alerts
Important updates sent to your email
Push notifications
Real-time alerts on your device
Weekly digest
Summary of activity each Monday
Danger zone
Delete account
Permanently deletes your account and all data.
Page Structure
Settings pages should be scannable. Group controls into labelled sections, ordered from most frequently changed to least. Destructive actions always appear last, visually separated.
Profile / Account
Name, avatar, email. The most personal and most-changed settings.
Appearance
Theme, language, density. Quick wins that personalise the experience.
Notifications
Granular control over how and when the product reaches the user.
Integrations
Connected tools and services. Each has an independent connect/disconnect action.
Privacy & Security
Two-factor auth, session management, data export.
Billing
Plan, payment method, invoices. Only show if relevant to the account type.
Danger zone
Delete account, reset all data. Always separated visually with a red accent.
Control Patterns
| Use case | Control | Note |
|---|---|---|
| Binary preference | Toggle (Switch) | Instant — no Save button required. |
| One-of-several options | Segmented button or Radio group | Use segmented for 2–4 options, radios for 5+. |
| Free-text entry | Input with label | Always show current value. Require explicit save. |
| Select from a list | Select / Dropdown | Show the current value as the trigger label. |
| File upload | Drag-and-drop zone + button fallback | Always provide a button fallback for accessibility. |
| Dangerous action | Red outlined button → Confirmation dialog | Two-step confirmation. Name the exact consequence. |
Destructive Actions
Separate visually
The danger zone is always at the bottom of the page, separated by a border or background change. Never intersperse destructive actions with regular settings.
Name the consequence
The button label names what will be destroyed. The confirmation dialog title repeats it. "Delete project" not "Delete" — context is critical when confirming.
Two-step minimum
One click is never enough for an irreversible action. A confirmation dialog with a red CTA is the minimum. For very destructive actions (account deletion), type-to-confirm the resource name.