ProvenancePopover
StableA label that says content was made with AI, and opens a short note on how.
Also known as content credentials, origin info, c2pa
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Every detail filled in
<ProvenancePopover
madeWith="Tattva Writer, model 4"
date="3 Oct 2026"
actions={["Drafted the summary", "Shortened the intro"]}
editedByPerson
why="You asked for a summary of the meeting notes."
detailsHref="#details"
/>Every detail filled in. Click, tap, or press Enter or Space on the label to open it.
When to use it
A small AI label in plain words that opens a short note on how the content was made. The label is always visible and the details are one click away, so it informs without getting in the way.
Made of: AI label · Panel title · Made with and date · What the AI did · Edited by a person · Why you are seeing this · Link to more
Use it for
- Marking text, images or files that AI made or changed.
- Explaining which tool made something, when, and whether a person edited it.
- Telling people why they are seeing AI content.
Not for
- A plain AI label with nothing more to explain: use AIBadge.
- Showing where a single fact came from: use CitationHoverCard.
- Showing how sure the AI is about an answer: use ConfidenceIndicator.
Do and avoid
Three nights in Lisbon, flights included.
Three nights in Lisbon, flights included.
Do
- Show the label first and keep the details one click away.
- Fill in only what you are sure of. Missing details are left out.
- Say whether a person edited it, if you keep track.
- Explain why in one sentence.
Avoid
- Do not label content AI did not touch. Too many labels weaken trust.
- Do not rely on the green color to show it is AI. The words do that.
- Do not put long policy text in the panel. Link to it.
- Do not make up details your system does not record.
On a phone
- The label is a button. On touch screens it keeps its small badge size and has a 44px tap area.
- On a phone the panel opens as a bottom sheet with a backdrop, within thumb reach. On wider screens it opens under the label, flips above if there is no room below, and stays inside the screen edges.
- Tap outside the panel to close it. The View full details link is small text with no 44px target.
Seen in products
- IBM Carbon for AI defines an AI Label that opens an Explainability Popover.
- Adobe Firefly applies Content Credentials to assets that are 100% Firefly-generated. The credentials carry a thumbnail, issuer, date, app, AI tool and actions.
- Sora applies a visible watermark by default plus C2PA metadata.
- Grammarly Authorship records typing and paste events to flag AI-generated text.
- Microsoft HAX guideline 11 asks the system to make clear why it did what it did.
- IBM Carbon for AI (opens in a new tab)
- Shape of AI (opens in a new tab)
- Google PAIR guidebook, explainability and trust (opens in a new tab)
- Microsoft HAX guidelines (opens in a new tab)
- Adobe Firefly Content Credentials (opens in a new tab)
- Grammarly Docs user guide (opens in a new tab)
- Accessible AI chat guide (opens in a new tab)
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "AI-generated" | Visible text of the label and the accessible name of the trigger. |
| madeWith | string | none | Tool or model that produced the content. |
| date | string | none | When it was made, as display text. |
| actions | string[] | none | What the AI did, one short phrase each. |
| editedByPerson | boolean | none | Whether a person changed it afterwards. Omit to hide the row. |
| why | string | none | One line on why the person is seeing this content. |
| detailsHref | string | none | Link to a fuller record. The link is hidden when omitted. |
| detailsLabel | string | "View full details" | Text of the details link. |
| title | string | "About this content" | Panel heading and accessible name of the panel. |
| rowLabels | { madeWith; date; actions; edited; yes; no } | none | Replaces the row labels for localisation. |
| open / onOpenChange | boolean / (open: boolean) => void | none | Controlled mode. Omit both for self-managed state. |
| align / side | "start" | "end" / "bottom" | "top" | "start" / "bottom" | Which edge of the label the panel hangs from. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ProvenancePopover switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hover
- The trigger pill gets a stronger tint under the pointer.
- focus
- The trigger shows a focus ring on keyboard focus.
- edited by a person
- Pass editedByPerson to add a row saying whether a person edited it.
Tokens
Change one of these and every part that uses it follows.
--lime--on-lime--surface-raised--surface-sunken--border--shadow-lg--radius-control
Built in
- The label is a button with words on it, so it is never only an icon.
- It tells screen readers whether the panel is open, and opens with Enter, Space, a click or a tap.
- Escape closes the panel and returns to the label. Clicking outside also closes it.
- The panel is named by its title, and the details are laid out as lists.
What you need to do
- Write a label that says what happened in plain words, such as AI-generated or Edited with AI.
- Translate the row labels with rowLabels if your product is not in English.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide