AIDisclosure
StableA small centered note reminding people to check the assistant's answers.
Also known as ai notice, ai disclaimer, transparency notice
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Default
AI can make mistakes. Check important information.
<AIDisclosure />The built-in message.
When to use it
One small, quiet line that reminds people the assistant can be wrong. It sits once under the message box, so it is always there without competing with the conversation.
Do and avoid
AI can make mistakes. Check important information.
AI can make mistakes. Check important information.
AI can make mistakes. Check important information.
Do
- Show it once, under the message box or at the end of the conversation.
- Keep custom text to one short sentence.
- State plainly what the person should check.
- Keep it light so it stays quiet.
Avoid
- Do not repeat it under every message. Use AIBadge to mark single items.
- Do not make it an amber warning. Amber is only for when a person has to act.
- Do not use it for legal terms that need a link or a click to agree.
- Do not write long paragraphs. It is small and centered.
On a phone
- The line is centred 12px text that wraps on a narrow screen.
- It is not tappable. Keep it visible near the input, not behind a tap.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | none | Replaces the default message when provided. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--fg-subtle
Built in
- Screen readers read it as a normal paragraph, in page order.
- It is not announced when its words change.
What you need to do
- Keep critical instructions out of it. It is the lightest text in the system and easy to miss.
- If you add a link, give it words that say where it goes.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide