AI labelPro
AI generated and AI assisted labels in three sizes with a details popover.
On this page
ProA help article drafted with a model, and a summary written by one.
Installation
Usage
import { AiLabel } from "@/components/ui/chatcn/pro/ai-label"
<AiLabel
kind="assisted"
details={{ model: "Claude Sonnet 5.5", date: "2 November 2026", editedBy: "Rosa Ibáñez", edits: 14, modelShare: 0.62 }}
/>The mark is a small circle filled by how much the model wrote: full for generated, half for assisted. It reads at 8 px, needs no color and avoids the sparkle, wand and robot clichés. With details, the label opens a popover with a provenance bar (model share in ink, people in gray, both in words), the model, the date and the edits. Small says AI for image corners and dense lists; screen readers still hear the full label.
Examples
States
ProBoth kinds in three sizes and inline in text.
Props
| Prop | Type | Notes |
|---|---|---|
kind | "generated" | "assisted" | Default generated |
size | "sm" | "md" | "lg" | lg adds the model name |
details | { model?, date?, editedBy?, edits?, modelShare?, note? } | Adds the popover |
label | string | Override the text, for translation |
Keyboard
| Key | Action |
|---|---|
| Enter or Space | Open the details |
| Esc | Close them |
Accessibility
- Without details it is plain text; with details it is a button named with the full label.
- The provenance bar is an image with the shares in its label.
Motion
The popover grows from the label in 180 ms. Nothing else moves.