Safety notice

Refusal and warning messaging with a calm, non-judgmental tone and a next step every time: refusals, warnings that need one decision, covered sensitive content and the disclaimer line.

Markdown

On this page

A calm refusal inside the answer: what it won't do, why, and three next steps.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/safety-notice.json

Usage

tsx

import { SafetyNotice } from "@/components/ui/chatcn/safety-notice"

<SafetyNotice
  title="I can't write it to look like it comes from their bank."
  alternatives={[{ label: "Write it from Tidewater billing" }]}
  onAlternative={(prompt) => send(prompt)}
>
  Emails that borrow a bank's identity read as phishing to customers and to spam filters.
</SafetyNotice>

Write refusals in the first person, say what part you won't do rather than refusing the whole request, give the reason without blame, and offer what you can do. No red, no capital letters, no exclamation marks.

Examples

Kinds

A warning that needs one decision, covered sensitive content and the disclaimer line.

Props

Prop	Type	Notes
`kind`	`"refusal" \| "warning" \| "sensitive" \| "disclaimer"`	Default `refusal`
`title`, `children`	`ReactNode`	One sentence, then why
`alternatives`, `onAlternative`	`{ label, prompt? }[]`	Refusal next steps
`actions`	`ReactNode`	Warning decisions, usually Stop and Continue
`learnMoreHref`, `learnMoreLabel`	`string`	Policy or help link
`content`, `revealed`, `defaultRevealed`, `onRevealedChange`		Sensitive content

Accessibility

A warning is an alert; a refusal is part of the answer and is read with it. The shield and triangle icons are decorative.
Show content moves focus to the revealed content, so screen reader users land on what they asked to see.

Motion

Warnings rise 4 px and fade in over 200 ms. Refusals do not animate: they arrive with the message.