Disclaimer
This experimental component might not yet be fully accessible, fully documented, or fully covered by design tokens, and its API and behavior might change more frequently than stable components.
For more information, see Introduction to experimental components and properties.
Usage
Overview
The disclaimer component is a short, inline message that sets expectations about the reliability or completeness of nearby content.
When to use
- When content is AI-generated or AI-assisted and users need to review it for accuracy.
- When content is general guidance, a summary, or an estimate that might not reflect full details or the most current information.
When not to use
- If you're explaining how a field works or what a user needs to enter, use helper text instead. Disclaimers signal limitation or risk, not instructions.
- If there is no genuine limitation or uncertainty to communicate, don't add a disclaimer.
Formatting
Placement
Place the disclaimer at the bottom of the component or content region it applies to, close enough that users can clearly connect it to the relevant content.
Disclaimer positioned at the bottom of an action card.
Avoid placing the disclaimer in a global footer or elsewhere on the page where it is separated from the content it describes.
Content
The disclaimer component displays a default AI disclaimer message:
"AI can make mistakes. Verify important information and double check responses."
To include the name of your AI agent in the disclaimer, set aiMode to true and use the aiName prop:
<Disclaimer
aiMode
aiName={'John Doe'}
/>
To replace the default text entirely, use the text prop:
<Disclaimer
text={"This is custom disclaimer text."}
/>
Accessibility
Place the disclaimer within the same group, card, or region as the content it applies to. This ensures that all users can clearly associate it with the relevant content.
Do not hide the disclaimer from assistive technologies.