Settings Patterns
Patterns for building settings pages and preference panels.
Settings Section
Group related settings together with a heading and description.
Notifications
Configure how you receive notifications.
Receive email alerts for important events
Receive push notifications on your devices
Receive critical alerts via SMS
Settings Card
Use cards for self-contained settings groups with save actions.
Profile
Update your personal information.
Tabbed Settings
Use tabs to organize multiple settings categories.
General Settings
Manage your account settings
Settings with Sidebar
For complex settings pages, use a sidebar navigation pattern.
Notifications
Configure your notification preferences
Daily summary of activity
Real-time alerts
Danger Zone
Destructive actions should be visually distinct and require confirmation.
Danger Zone
Irreversible and destructive actions
Delete this device
Permanently remove this device and all its data
Delete account
Permanently delete your account and all data
Best Practices
- Group related settings together with clear headings
- Use switches for on/off toggles, selects for multiple options
- Provide helper text to explain what each setting does
- Auto-save when possible, or show clear save buttons
- Place destructive actions at the bottom in a "Danger Zone"
- Require confirmation for irreversible actions
- Show success feedback when settings are saved
- Use tabs or sidebar nav for pages with many settings categories
- Disable form elements while saving to prevent double-submission
- Pre-populate fields with current values