AI primitive
GuardrailNotice
Inline alert that explains why a model declined or partially refused — content policy, jailbreak detection, off-topic. Brand-friendly default styles.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { GuardrailNotice } from '@/components/molecules'
<GuardrailNotice
kind="content-policy"
title="Content policy"
detail="The request was redirected because it includes…"
onDismiss={() => setOpen(false)}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "content-policy" | "jailbreak" | "off-topic" | "rate-limit" | "content-policy" | Determines icon + color tone. |
| title | string | — | Short label. |
| detail | string | — | Optional one-line explanation. |
| onDismiss | () => void | — | When provided, shows a dismiss button. |
Accessibility
role
role='alert' so screen readers announce immediately.
contrast
Warning/danger tones tested AA in both themes.