AI Caveat
Trust and transparency component for displaying AI limitations, disclaimers, accuracy warnings, and safety notices. Essential for responsible AI interfaces.
Preview
Full caveat card with expandable details
Accuracy Notice
This AI response is based on training data with a knowledge cutoff. Information may not reflect the most recent developments.
Severity Levels
Different severity levels for various situations
Disclaimer
This is general information and should not be considered professional advice.
Accuracy Notice
AI-generated content may contain inaccuracies. Please verify important information.
Potential Bias
AI responses may reflect biases present in training data.
Safety Warning
Do not rely on AI for medical, legal, or safety-critical decisions.
Caveat Types
Pre-configured types for common scenarios
Limitations
This AI cannot access real-time data, browse the internet, or remember previous conversations.
Information May Be Outdated
Information may be outdated. The AI's knowledge has a cutoff date.
As of 1/1/2025
Experimental Feature
This feature is experimental and may change or be discontinued.
Privacy Notice
Your conversations may be used to improve the AI. Do not share sensitive personal information.
Banner Variant
Full-width notification for page-level warnings
Accuracy Notice: AI responses are generated and may contain errors. Always verify important information.
Inline Variant
Embedded warning within content
Accuracy Notice
The following code example is AI-generated and should be reviewed before use.
- Check for security vulnerabilities
- Test in a safe environment first
Compact Variant
Minimal single-line warning
Tooltip Variant
Minimal inline text
Without AI Indicator
Hide the AI badge
Disclaimer
This is a general disclaimer that applies to all content on this platform.
Props
AICaveat component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'accuracy' | 'limitations' | 'bias' | 'privacy' | 'outdated' | 'experimental' | 'disclaimer' | 'safety' | 'custom' | 'disclaimer' | Pre-configured caveat type |
severity | 'info' | 'warning' | 'caution' | 'critical' | — | Severity level (auto-set by type if not specified) |
title | string | — | Custom title (defaults based on type) |
message* | string | — | Main caveat message |
details | string[] | — | Expandable list of details |
links | CaveatLink[] | — | Related links ({ label, href }) |
dismissible | boolean | false | Allow dismissing the caveat |
onDismiss | () => void | — | Callback when dismissed |
onLearnMore | () => void | — | Callback for "Learn More" button |
variant | 'banner' | 'card' | 'inline' | 'tooltip' | 'compact' | 'card' | Display variant |
showAIIndicator | boolean | true | Show the AI badge |
icon | React.ReactNode | — | Custom icon |
timestamp | Date | — | When this caveat applies (for outdated type) |
Usage
Import and implementation example
import { AICaveat } from '@/blocks/ai-transparency/ai-caveat'
export default function Example() { return ( <> {/* Accuracy warning with details */} <AICaveat type="accuracy" message="This AI response may contain inaccuracies." details={[ 'Knowledge cutoff: January 2025', 'Verify information from authoritative sources', ]} onLearnMore={() => openHelpModal()} dismissible />
{/* Banner for page-level warning */} <AICaveat variant="banner" type="experimental" message="This feature is in beta. Feedback welcome!" />
{/* Inline warning in content */} <AICaveat variant="inline" type="safety" severity="critical" message="Do not use AI for medical diagnosis." />
{/* Compact for minimal disruption */} <AICaveat variant="compact" type="accuracy" message="AI-generated - verify before use" /> </> )}Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Five variants: Banner, card, inline, compact, and tooltip displays
- Eight caveat types: Pre-configured for accuracy, limitations, bias, privacy, etc.
- Four severity levels: Info, warning, caution, and critical
- Expandable details: Show additional information on demand
- External links: Link to documentation or guidelines
- Dismissible: Users can dismiss non-critical caveats
- AI indicator: Badge showing this relates to AI content
- Timestamp support: Show when information may be outdated
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses semantic heading for titleColor-coded with text descriptionsLinks open in new tab with rel="noopener"Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to interactive elements |
| Enter / Space | Expand details or dismiss |
Notes
- Severity conveyed through text, not just color
- Dismiss button has visible focus state
- Consider adding role="alert" for critical caveats