RefusalCard

Graceful handling of declined AI requests. Shows the reason, categorizes by type, and offers alternative prompts — turning rejection into guidance.

RefusalCard — All Types

I can't help with that request for safety reasons.

Try instead:

I can't access external URLs or browse the internet.

Try instead:

That request falls outside my usage policy.

Try instead:

I don't have enough context to give a good answer. Could you share more details?

Try instead:

RefusalCard — Custom Content

I can't generate images directly.

Alternatives:

Use DALL-E or Midjourney for image generation
I can describe the image you want in detail
I can write SVG code for simple graphics

Import

tsx

import { RefusalCard } from "@arc-lo/ui";

Basic usage

tsx

<RefusalCard
  type="safety"
  reason="I can't help with that request."
  suggestions={[
    "Tell me about safety best practices",
    "How does content moderation work?",
  ]}
  onSuggestionClick={(s) => submitPrompt(s)}
/>

Types

tsx

{/* Safety — red accent, shield icon */}
<RefusalCard type="safety" />

{/* Capability — amber accent, lightning icon */}
<RefusalCard
  type="capability"
  reason="I can't access external URLs."
/>

{/* Policy — orange accent, clipboard icon */}
<RefusalCard
  type="policy"
  reason="That falls outside my usage policy."
/>

{/* Context — blue accent, search icon */}
<RefusalCard
  type="context"
  reason="I don't have enough context."
/>

With custom content

tsx

<RefusalCard type="capability" reason="I can't generate images.">
  <p className="mt-2 text-sm text-gray-500">
    Try using DALL-E or Midjourney for image generation.
  </p>
</RefusalCard>

Props

Prop	Type	Default	Description
`type`	`"safety" \| "capability" \| "policy" \| "context"`	`"capability"`	Refusal category
`reason`	`string`	—	Why the request was refused
`suggestions`	`string[]`	—	Alternative prompt suggestions
`onSuggestionClick`	`(suggestion: string) => void`	—	Called when user clicks a suggestion
`icon`	`ReactNode`	—	Override default icon

Refusal types

Type	Color	Icon	Use case
`safety`	Red	Shield	Harmful content requests
`capability`	Amber	Lightning	Feature not supported
`policy`	Orange	Clipboard	Usage policy violation
`context`	Blue	Search	Insufficient information