Overview
Disclosure
AI-generated content badge and banner indicators
badgetransparencylabeling
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "badge" | "banner" | "inline" | required | Display style of the disclosure indicator |
type | "ai-generated" | "ai-assisted" | "ai-suggested" | required | The nature of AI involvement in the content |
model | string | undefined | Name of the AI model used (e.g. GPT-4, Claude) |
timestamp | Date | undefined | When the AI-generated content was created |
customLabel | string | undefined | Override the default disclosure label text |
Docs
Disclosure makes AI involvement visible. It labels content, features, and actors so users always know when they're interacting with — or viewing the output of — an AI system. This matters because AI-generated content can be indistinguishable from human work, and users deserve to make informed judgments about what they're reading, sharing, or acting on. In products where AI and human content coexist, clear labeling prevents users from unknowingly presenting machine-generated work as their own.
Variants
- Actor labeling — Distinct names, avatars, and badges that identify non-human participants in conversations or collaborative spaces.
- Feature-level indicators — Inline chips, icons, or labels (e.g. 'AI Assist') that mark specific features or actions as AI-powered.
- Output attribution — Watermarks, badges, or tags on generated content that describe the nature of AI involvement — generated, edited, or summarized.
Use Cases
- Chat interfaces where AI bots participate alongside humans
- Content editors that blend AI-generated and human-written text
- Customer support handoffs between AI agents and human operators
- Social platforms where AI-generated media could be mistaken for real content
- Compliance contexts where AI use must be disclosed by regulation
Best Practices
- Name the AI actor consistently and give it a visually distinct identity — users should never mistake it for a human participant.
- Use specific action verbs in labels ('Summarized with AI', 'AI-generated draft') rather than a vague 'AI' tag, so users know exactly what happened.
- Apply subtle visual differentiation — color, background, or border — to AI content without making it feel lesser or untrustworthy.
- Never simulate human interaction, especially in sensitive contexts like support or healthcare, where misattribution erodes trust.
- Provide opt-out or consent mechanisms when AI is introduced into shared spaces, particularly for recording or data-processing features.