webdevpuneet.com

Related Snippets

147 in Cards category
55–60 of 60

Crypto Price Ticker Card

AI Safety Refusal Card

AI Persona Selector

AI Diff Review Card

Vanilla-Tilt 3D Card Grid

Motion One Spring Cards

AI Safety Refusal Card — Free Non-Punitive Decline UI Snippet

AI Safety Refusal Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsSVGAI UI

Copy & paste

Source Code

<div class="src-card">
  <div class="src-icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 9v4"/><path d="M12 17h.01"/>
      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
    </svg>
  </div>

  <h3>I can't help with that one</h3>
  <p class="src-text">This request involves generating content that could be used to bypass a security system, which falls outside what I'm able to assist with. This isn't a judgment on you — it's a boundary I hold for every request of this kind.</p>

  <div class="src-detail">
    <strong>What I can help with instead:</strong>
    <span>Explaining how the security system works conceptually, reviewing your own code for vulnerabilities, or helping you write a responsible disclosure report.</span>
  </div>

  <div class="src-actions">
    <button type="button" class="src-secondary" id="srcLearnMore">Why was this declined?</button>
    <button type="button" class="src-primary" id="srcRephrase">Rephrase my request</button>
  </div>

  <div class="src-more" id="srcMore" hidden>
    Responses like this are shaped by a fixed set of usage policies applied consistently to every user — they're not personal, and they don't affect your account standing. If you think this was declined in error, you can share more context and I'll take another look.
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Non-alarming visual tone
Muted slate icon and calm heading avoid red, error-style presentation.
Plain-language explanation
States the specific reason for the decline in one clear sentence.
Explicit non-judgment framing
Reassures the user the boundary applies consistently, not personally.
"What I can help with instead" panel
Redirects to concrete alternatives rather than ending on a dead end.
Expandable policy explanation
Learn more reveals detail inline without navigating away.
Rephrase action with feedback
Confirms readiness for a new attempt instead of silent focus return.
Fully data-editable copy
Every string is easy to adapt to a specific product's refusal policy.
No dependencies
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

AI Safety Refusal Card — Explain, Do Not Punish, Offer a Path Forward

Screenshot of the AI Safety Refusal Card snippet rendered live

Every responsible AI product needs a UI pattern for the moment an assistant declines a request — and how that moment is designed matters. A refusal that feels like a scolding erodes trust; a refusal that explains itself clearly and offers a path forward keeps the relationship intact. This snippet builds that card in plain HTML, CSS, and vanilla JavaScript: a calm icon, a plain-language explanation, a "what I can help with instead" panel, and Rephrase / Learn more actions.

Tone starts with the icon and heading

The card deliberately avoids red, error-style coloring — the icon uses a muted slate tone rather than alarm red, and the heading reads "I can't help with that one" rather than "Request denied" or "Policy violation." Small wording choices like this determine whether a refusal reads as a wall or as a conversation partner setting a boundary, which is the actual design goal of a refusal UI.

Explain the boundary, then offer an alternative

The body text names the specific reason for the decline in one sentence, then explicitly states it isn't a judgment on the user — followed by a distinct "what I can help with instead" panel listing concrete alternatives. This structure (boundary, reassurance, alternative) is what turns a dead end into a redirect, which matters enormously for retention: a user who gets *only* "no" churns; a user who gets "no, but here's what I can do" often stays.

Two low-friction next actions

"Why was this declined?" expands an inline explanation of the policy without leaving the card, and "Rephrase my request" gives immediate positive feedback (a brief confirmation state) rather than silently returning focus to an input box, so the user knows their next attempt is welcomed rather than pre-judged.

Where this fits in an AI product

Pair it with an AI chat interface as an inline message type, or with an AI action approval card and an AI diff review card to cover the full spectrum of AI response states — approve, review, and decline.

Customizing it

Wire the "Learn more" panel to link to your real usage policy, replace the static alternative suggestions with ones generated per-request, or add a feedback mechanism so users can flag refusals they believe were made in error.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA refusal card renders with an explanation and a "what I can help with instead" panel.
  2. 2
    Click "Why was this declined?"An inline panel expands explaining the policy is applied consistently, not personally.
  3. 3
    Click "Rephrase my request"The button briefly confirms readiness before returning to its normal label.
  4. 4
    Read the tone choicesMuted colors and plain language avoid an alarming or punitive feel.
  5. 5
    Edit the copyReplace the explanation and alternatives with wording specific to your product's policies.
  6. 6
    Wire up real actionsConnect Rephrase to clear/refocus the input, and Learn more to your actual policy docs.

Real-world uses

Common Use Cases

AI chat refusals
Render a declined request as an inline message in an AI chat interface, with a calm slate icon rather than alarming red error styling.
Content moderation explanations
Explain why generated content was withheld in plain language, with a non-judgmental statement that the boundary applies consistently to everyone.
Agentic tool-use products
Pair with an AI action approval card so users see both when an agent asks permission and when it declines.
Code assistants
Decline unsafe code requests, then use the What I can help with instead panel to redirect users toward concrete alternatives.
Support bots and trust documentation
Redirect out-of-scope requests to a human, or show trust and safety teams a reference pattern with rephrase and learn-more actions.
Related: Certificate of Completion Preview
See the Certificate of Completion Preview for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Red and error-style presentation frame a refusal as something the user did wrong, which increases frustration and erodes trust. A muted slate tone and a calm heading like "I can't help with that one" instead frame it as the assistant stating a boundary, which research on trust and safety UX consistently shows keeps users more willing to continue the relationship after a decline.

A refusal that ends on pure "no" is a dead end and a common churn trigger. Immediately offering concrete alternatives — reviewing code, explaining a concept, or a related but permitted task — converts the decline into a redirect, giving the user a next step instead of leaving them stuck.

Replace the .src-text paragraph with wording specific to why your product declined the request, and update the .src-detail panel with alternatives genuinely relevant to that category of request. Keep the two-part structure — a specific reason, then a non-judgmental reassurance — since that structure is what does the trust-preserving work, not the exact wording.

In this demo it briefly shows a confirmation state. In a real product, wire it to refocus (and optionally clear) the message input, scroll it into view, and possibly pre-fill a softened version of the original request if your backend can suggest one — the goal is to make retrying feel invited, not like starting over from scratch.

Pass the explanation text, alternatives, and refusal category as props so the copy can vary per request type, track the "learn more expanded" state locally, and lift the rephrase action to a callback prop that the parent uses to refocus the actual chat input. The structure and tone choices port unchanged.