UX Patterns Guide
Back to compare picker

Security warning vs Warning text vs Alert vs Permission denied state vs Sensitive-data reveal

Choose security warning when phishing, malware, deceptive site, dangerous download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, unknown publisher, or account-security evidence means proceeding could expose credentials, personal data, device integrity, account access, or organization assets.

Security warning live exampleWarning text live exampleAlert live examplePermission denied state live exampleSensitive-data reveal live example

Decision dimensions

Dimension Security warningWarning textAlertPermission denied stateSensitive-data reveal
UI or UX UI + UX - Security-risk warning and safe interruption before unsafe navigation, download, submission, preview, or sensitive actionUI + UX - Severe-consequence warning copy before an actionUI + UX - Urgent current-task status messageUI + UX - Authorization and access-boundary stateUI + UX - Controlled reveal and re-hiding of masked sensitive values, secrets, tokens, credentials, identifiers, or private records
UI guidance Render a security warning as a high-clarity interruption that names the detected risk, identifies the destination or object, explains the concrete threat, presents the safest action as the primary path, and separates any override behind deliberate risk detail.Render warning text as a short high-emphasis statement with a warning icon, visible or hidden warning label, and explicit consequence copy placed before the relevant action, declaration, or instruction.Render an alert as a visible message in the current task area with a clear severity cue, short title, consequence-focused body, and one direct action or safe dismissal when appropriate.Show the blocked object or action, current account, permission level, required role, owner, and request path when revealing that information is allowed.Render sensitive-data reveal as a masked value with an explicit reveal action, visible hide action, clear field identity, safe default state, reveal duration or hold behavior, and status feedback that explains what is visible now.
UX guidance Use security warning when a product, browser, operating system, or service has evidence that proceeding could expose credentials, install harmful software, leak sensitive data, bypass trust, or weaken account protection.Use warning text when users must understand a serious consequence before acting or failing to act, such as a fine, loss of access, permanent deletion, eligibility impact, or legal responsibility.Use alerts when the user must notice a time-sensitive condition that affects their current task, such as session expiry, lost connection, unsaved work risk, failed submission, or a security-sensitive hold.Use permission denied state when the system knows the user is authenticated but their role, group, share, license, policy, or approval status blocks a specific object or action.Use sensitive-data reveal when users need to verify, compare, copy, rotate, recover, or transcribe a sensitive value that is normally masked or redacted.
Good UI A browser interstitial says Deceptive site ahead, shows the suspicious domain, explains that attackers may steal passwords, and makes Back to safety the primary action while placing Visit unsafe site behind Details.Before Submit declaration, a warning with an exclamation icon says the user may be fined if they provide false information.A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable.A report page says Quarterly revenue report requires Finance viewer access, shows the current account, names the report owner, and offers Request access and Switch account.An API key row shows sk_live_****9H2Q by default, requires Reauthenticate before Full reveal, logs the reveal event, and automatically hides after 30 seconds.
Bad UI A red page says Security issue with Continue as the only visible action.A red sentence says Important below the submit button after the user has already acted.A vague red strip says Warning with no object, consequence, or next step.A denial page says Something went wrong and shows Retry even though the user lacks a required group.A dashboard shows API keys in plain text by default and copies them to clipboard without warning or audit.
Good UX A user clicks a payroll link that visually resembles the company domain, sees the suspicious-domain warning, returns to the trusted site, and reports the link to security.Users see the fine or eligibility consequence before checking the declaration and can pause to verify their answer.Users can renew the session, save a draft, or inspect details without losing typed work.A user opens a restricted report, sees which account is signed in, requests viewer access with a reason, then sees that the request is pending with the owner.A developer needs to rotate a webhook secret, reveals it after step-up verification, copies it with a visible clipboard warning, then sees it auto-hide with an audit ID.
Bad UX A user sees a vague warning, assumes it is routine maintenance, proceeds, and enters credentials into a phishing page.A benefit-loss warning appears only after submission, so users cannot change the decision it warns about.The only warning that unsaved work will be lost disappears after five seconds.The app returns a blank screen for a restricted file, so the user cannot tell whether the file is gone, private, or opened with the wrong account.A user opens billing details in a shared office and the full card number appears automatically with no warning.
Best fit A threat signal indicates phishing, malware, deceptive site, unsafe download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, or account-security danger.A user must understand a serious consequence before taking or skipping an action.A current task has a time-sensitive warning, error, or important status change.A signed-in user lacks permission to view, edit, publish, export, delete, approve, share, administer, or configure a resource.Users need to inspect, copy, verify, rotate, transcribe, or compare a sensitive value that should normally stay masked or redacted.
Avoid when The message is only a general severe consequence before a product action; use warning text.The message is a dynamic task status that must be announced when it appears.The message belongs beside one object, row, field, or local section.The user is not signed in and the next step is authentication rather than authorization.The task is only entering a password into an authentication form; use password input.
Required state Safe path state with primary Back to safety, Cancel, Remove, Use trusted route, or Contact admin action.No-warning state where the action has no severe consequence.No-alert state with the task operating normally.Whole-object access denied state.Masked state with the field identity, safe suffix or count, and reveal eligibility.
Accessibility burden Use a heading and text that name the risk before the destination or details, so screen reader users hear the warning context first.Do not rely on color alone; include visible or programmatic warning wording and a non-color cue such as an icon.Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself.Use a heading that identifies the access boundary and a text description that does not rely on lock icons or red color alone.Use a labelled button or toggle whose accessible name includes the field, such as Show API key or Hide account number.
Common misuse Using vague warning copy that does not say phishing, malware, certificate, insecure connection, dangerous download, or suspicious redirect.Using warning text for routine hints, explanations, or mild reminders.Using a disappearing toast for warnings users must act on before continuing.Treating authorization denial as a generic retryable error.Showing sensitive values in plain text by default.

Security warning

UI or UX
UI + UX - Security-risk warning and safe interruption before unsafe navigation, download, submission, preview, or sensitive action
UI guidance
Render a security warning as a high-clarity interruption that names the detected risk, identifies the destination or object, explains the concrete threat, presents the safest action as the primary path, and separates any override behind deliberate risk detail.
UX guidance
Use security warning when a product, browser, operating system, or service has evidence that proceeding could expose credentials, install harmful software, leak sensitive data, bypass trust, or weaken account protection.
Good UI
A browser interstitial says Deceptive site ahead, shows the suspicious domain, explains that attackers may steal passwords, and makes Back to safety the primary action while placing Visit unsafe site behind Details.
Bad UI
A red page says Security issue with Continue as the only visible action.
Good UX
A user clicks a payroll link that visually resembles the company domain, sees the suspicious-domain warning, returns to the trusted site, and reports the link to security.
Bad UX
A user sees a vague warning, assumes it is routine maintenance, proceeds, and enters credentials into a phishing page.
Best fit
A threat signal indicates phishing, malware, deceptive site, unsafe download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, or account-security danger.
Avoid when
The message is only a general severe consequence before a product action; use warning text.
Required state
Safe path state with primary Back to safety, Cancel, Remove, Use trusted route, or Contact admin action.
Accessibility burden
Use a heading and text that name the risk before the destination or details, so screen reader users hear the warning context first.
Common misuse
Using vague warning copy that does not say phishing, malware, certificate, insecure connection, dangerous download, or suspicious redirect.

Warning text

UI or UX
UI + UX - Severe-consequence warning copy before an action
UI guidance
Render warning text as a short high-emphasis statement with a warning icon, visible or hidden warning label, and explicit consequence copy placed before the relevant action, declaration, or instruction.
UX guidance
Use warning text when users must understand a serious consequence before acting or failing to act, such as a fine, loss of access, permanent deletion, eligibility impact, or legal responsibility.
Good UI
Before Submit declaration, a warning with an exclamation icon says the user may be fined if they provide false information.
Bad UI
A red sentence says Important below the submit button after the user has already acted.
Good UX
Users see the fine or eligibility consequence before checking the declaration and can pause to verify their answer.
Bad UX
A benefit-loss warning appears only after submission, so users cannot change the decision it warns about.
Best fit
A user must understand a serious consequence before taking or skipping an action.
Avoid when
The message is a dynamic task status that must be announced when it appears.
Required state
No-warning state where the action has no severe consequence.
Accessibility burden
Do not rely on color alone; include visible or programmatic warning wording and a non-color cue such as an icon.
Common misuse
Using warning text for routine hints, explanations, or mild reminders.

Alert

UI or UX
UI + UX - Urgent current-task status message
UI guidance
Render an alert as a visible message in the current task area with a clear severity cue, short title, consequence-focused body, and one direct action or safe dismissal when appropriate.
UX guidance
Use alerts when the user must notice a time-sensitive condition that affects their current task, such as session expiry, lost connection, unsaved work risk, failed submission, or a security-sensitive hold.
Good UI
A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable.
Bad UI
A vague red strip says Warning with no object, consequence, or next step.
Good UX
Users can renew the session, save a draft, or inspect details without losing typed work.
Bad UX
The only warning that unsaved work will be lost disappears after five seconds.
Best fit
A current task has a time-sensitive warning, error, or important status change.
Avoid when
The message belongs beside one object, row, field, or local section.
Required state
No-alert state with the task operating normally.
Accessibility burden
Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself.
Common misuse
Using a disappearing toast for warnings users must act on before continuing.

Permission denied state

UI or UX
UI + UX - Authorization and access-boundary state
UI guidance
Show the blocked object or action, current account, permission level, required role, owner, and request path when revealing that information is allowed.
UX guidance
Use permission denied state when the system knows the user is authenticated but their role, group, share, license, policy, or approval status blocks a specific object or action.
Good UI
A report page says Quarterly revenue report requires Finance viewer access, shows the current account, names the report owner, and offers Request access and Switch account.
Bad UI
A denial page says Something went wrong and shows Retry even though the user lacks a required group.
Good UX
A user opens a restricted report, sees which account is signed in, requests viewer access with a reason, then sees that the request is pending with the owner.
Bad UX
The app returns a blank screen for a restricted file, so the user cannot tell whether the file is gone, private, or opened with the wrong account.
Best fit
A signed-in user lacks permission to view, edit, publish, export, delete, approve, share, administer, or configure a resource.
Avoid when
The user is not signed in and the next step is authentication rather than authorization.
Required state
Whole-object access denied state.
Accessibility burden
Use a heading that identifies the access boundary and a text description that does not rely on lock icons or red color alone.
Common misuse
Treating authorization denial as a generic retryable error.

Sensitive-data reveal

UI or UX
UI + UX - Controlled reveal and re-hiding of masked sensitive values, secrets, tokens, credentials, identifiers, or private records
UI guidance
Render sensitive-data reveal as a masked value with an explicit reveal action, visible hide action, clear field identity, safe default state, reveal duration or hold behavior, and status feedback that explains what is visible now.
UX guidance
Use sensitive-data reveal when users need to verify, compare, copy, rotate, recover, or transcribe a sensitive value that is normally masked or redacted.
Good UI
An API key row shows sk_live_****9H2Q by default, requires Reauthenticate before Full reveal, logs the reveal event, and automatically hides after 30 seconds.
Bad UI
A dashboard shows API keys in plain text by default and copies them to clipboard without warning or audit.
Good UX
A developer needs to rotate a webhook secret, reveals it after step-up verification, copies it with a visible clipboard warning, then sees it auto-hide with an audit ID.
Bad UX
A user opens billing details in a shared office and the full card number appears automatically with no warning.
Best fit
Users need to inspect, copy, verify, rotate, transcribe, or compare a sensitive value that should normally stay masked or redacted.
Avoid when
The task is only entering a password into an authentication form; use password input.
Required state
Masked state with the field identity, safe suffix or count, and reveal eligibility.
Accessibility burden
Use a labelled button or toggle whose accessible name includes the field, such as Show API key or Hide account number.
Common misuse
Showing sensitive values in plain text by default.
Decision rules
  • Choose security warning when phishing, malware, deceptive site, dangerous download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, unknown publisher, or account-security evidence means proceeding could expose credentials, personal data, device integrity, account access, or organization assets.
  • Choose warning text when the risk is a known consequence of a product decision, such as a fine, deletion, eligibility loss, legal responsibility, or data exposure, and the message belongs before the related control without a detected threat verdict.
  • Choose alert when the user needs urgent current-task status such as failed sync, payment hold, session expiring, or connection lost, but the task can remain in context and does not need an unsafe-destination interstitial.
  • Choose permission denied state when the user is authenticated but role, group, license, share, policy, or owner approval blocks an object or action; the issue is authorization, not trust reputation, malware, certificate, transport, or phishing evidence.
  • Choose sensitive-data reveal when the product holds an already-held password, API key, token, recovery code, bank account, card number, tax identifier, health identifier, or private record and the user needs controlled exposure through masked, partial, timed, copied, audited, or reauthenticated reveal rather than a warning about an unsafe destination.
  • A security warning must make Back to safety, Remove download, Cancel submission, Use trusted route, Contact admin, or Review activity the primary path; any Visit anyway, Keep anyway, or Continue to unsafe destination action must be secondary, deliberate, and policy-aware.
  • Security warnings should name both the risk and the affected object: deceptive site plus domain, dangerous download plus file, invalid certificate plus site, insecure form submission plus destination, suspicious redirect plus target, or file preview blocked plus source.
  • Do not use a security warning for fake urgency, marketing, consent pressure, broad maintenance, validation errors, ordinary destructive confirmation, or routine severe-consequence copy.
  • Report false positive, report phishing, site-owner remediation, and administrator contact paths must not require visiting the unsafe destination.
  • If the full destination, file name, account event, or evidence would leak private information, use a redacted security-warning variant and keep raw secrets out of DOM text, logs, URLs, analytics, support payloads, and screenshots.
Inspect live examples
Security warningWarning textAlertPermission denied stateSensitive-data reveal
Failure modes
  • The warning says Security issue but hides whether the risk is phishing, malware, certificate, connection, mixed content, download, redirect, or account takeover.
  • Continue is the primary action and the safe path is small, hidden, or absent.
  • The warning appears after credential entry, form submission, file execution, or active preview rendering has already happened.
  • False-positive reporting is coupled to Visit anyway, forcing users through the unsafe site just to report the block.
  • The warning leaks raw passwords, tokens, payment data, private file content, or sensitive account-event details.
  • A role or access denial is mislabeled as a security warning, so users look for phishing or malware explanations instead of requesting permission.
  • A general warning text pattern is over-escalated into a browser-like security block, training users to dismiss real security warnings.