Dangerous Defaults
Destructive actions, irreversible changes, and critical warnings — patterns that go beyond a generic confirm modal.
Danger zone — settings page pattern
A dedicated 'Danger zone' section at the bottom of a settings page that groups all irreversible actions together. This is the standard pattern used by GitHub, Vercel, and most serious SaaS products.
General
Basic project settings.
Danger zone
Transfer ownership
Transfer this project to another team member.
Archive project
Hide from active projects. Can be restored later.
Delete project
Permanently delete this project and all its data.
Place at the bottom of any settings page that contains destructive actions. Use a red-tinted border to visually separate it from safe settings. Each action should have its own description and confirmation flow.
Irreversible change — inline warning
The user is about to change something that can't be undone — like changing a project's URL slug, which will break all existing links. This isn't a delete, but it's still dangerous.
Project URL
The public URL for this project.
This change is irreversible
Changing the URL will break all existing links, bookmarks, and API integrations pointing to app.acme.com/old-slug.
Show an inline warning directly next to the field that triggers the irreversible change. Don't wait for the save button — warn them as they're editing so they can reconsider before committing.
Production environment indicator
The user is working in a production environment. Every action here affects real users and real data. A persistent visual indicator prevents accidental changes that were meant for staging.
Production environment
Changes affect live usersStaging environment
Safe to testDevelopment
Local data onlyShow a persistent banner or visual indicator whenever the user is in a production context. Color-code environments (red for production, yellow for staging, green for development). This is critical for any product with multiple environments.
Sensitive data reveal pattern
The UI contains sensitive data (API keys, secrets, tokens) that should be hidden by default. The user must explicitly click to reveal it. This prevents shoulder-surfing and accidental screen-sharing exposure.
API Secret
Used for server-side authentication.
••••••••••••••••••••••••a8f2sk_live_••••••••••••••••••••••••Click the eye icon to reveal. Value will be hidden again after 30 seconds.
Use for any sensitive value displayed in the UI — API keys, secrets, passwords, tokens. Default to masked. Require an explicit click to reveal. Auto-hide after a timeout.
Undo vs Confirm — choosing the right pattern
Not every destructive action needs a confirmation modal. For low-stakes reversible actions (archive, mark as read, move to folder), an undo toast is faster and less disruptive. Reserve confirmation modals for truly irreversible actions.
Use undo toast for:
• Archive project → Undo toast
• Move to folder → Undo toast
• Mark all as read → Undo toast
• Change status → Undo toast
Use confirm modal for:
• Delete account → Confirm + type to verify
• Revoke API key → Confirm modal
• Remove team member → Confirm modal
• Cancel subscription → Confirm + reason
Use undo for: archive, soft-delete, status changes, moving items. Use confirm for: permanent delete, revoking access, canceling subscriptions. The rule: if you can undo it server-side within 10 seconds, use undo.