Standard

AI-made label

A compact badge marking content as generated or assisted, at the point of consumption.

MHelp centerBilling and account Search articles

Why was I charged twice?

Billing · 3 min read
Adding and removing seats

Account · 2 min read

By Maya Reyes
What changed in pricing on 1 July

Billing · 4 min read
Exporting invoices to CSV

Billing · 2 min read

Try it: Click a label. It says how much of the article AI wrote and who checked it, so one mark doesn't stand for every kind of AI help.

In the wild

How 2 products ship this pattern. Click a screenshot to enlarge it.

Two Facebook phone screens: a post menu with the 'AI info' option highlighted, and a sheet explaining 'Content in this post may have been modified with AI' — Facebook (Meta)
Facebook adds an 'AI info' entry to posts it detects as AI-made or AI-edited. Opening it explains what the signal does and does not mean.
Source: Meta newsroom ↗

YouTube Shorts player with a magnified 'Altered or synthetic content' label above the channel name — YouTube
YouTube Shorts puts an 'Altered or synthetic content' label in the player, above the channel name, when a creator discloses realistic AI content.
Source: YouTube blog ↗

When to use

Public content, marketplaces, and anywhere provenance affects how a viewer should read it.

Seen in

Meta AI Info labels, TikTok AI-generated tags, YouTube altered-content disclosure, LinkedIn credentials.

For engineers

C2PA's ai-disclosure assertion carries model provenance and degree of human oversight — use the gradient.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "AI-made label" pattern: `AiContentLabel`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A compact badge marking content as generated or assisted, at the point of consumption.

Use it when: Public content, marketplaces, and anywhere provenance affects how a viewer should read it.

## What to build
A small badge on a piece of content stating how much of it AI produced and whether a person reviewed it, using a graded scale instead of a single "AI" mark. Opening it explains the specifics in a sentence or two. It renders next to titles, bylines, thumbnails or posts wherever the content is consumed.

### Props
- `degree`: "ai-generated" | "ai-drafted" | "ai-assisted" | "ai-edited", the gradient, mapped to labels such as "AI-generated", "AI-drafted, reviewed", "AI-assisted".
- `review`: { status: "reviewed" | "not-reviewed"; by?: string; at?: Date; changedShare?: number }, human oversight, e.g. "rewrote 32%".
- `detail?`: string, how the AI was used, e.g. "Drafted from 14 resolved support tickets".
- `model?`: string, optional model or tool provenance.
- `size`: "inline" | "compact", and `labels?` for the degree names.
- `learnMoreHref?`: string, a link to the policy explaining the scale.
- `onOpen?()`: callback when the detail is opened, for analytics.

### States it must render
- Collapsed: icon plus degree label, e.g. "AI-drafted, reviewed"; unreviewed AI-generated content reads "AI-generated, not reviewed".
- Open: a popover with the degree in words, how AI was used, who reviewed it and when, and what share they changed.
- Not reviewed: the open state says so plainly with a caution, e.g. "Not reviewed by a person yet. Steps may be wrong".
- Light assistance: "AI-assisted" with a lighter treatment and detail like "Written by a person; AI suggested a table".

### Interactions
- Clicking or pressing Enter opens the popover; Escape or clicking outside closes it.
- The learn-more link opens the policy explaining every degree on the scale.
- In lists, each label opens independently; opening one closes any other.

### Edge cases
- `degree` set but `review` unknown: show "review status unknown" rather than implying review.
- Compact size on thumbnails: keep the degree distinguishable (different icon or short code), not one shared "AI" glyph.
- Content that changed after review: show "Changed since review" if the parent passes it.
- No AI involvement: render nothing; do not show a "Human-made" claim unless the parent explicitly passes one.

## Must avoid
Binary "AI" labels that flatten heavy generation and light assistance into one meaningless mark.

## Engineering constraint
C2PA's ai-disclosure assertion carries model provenance and degree of human oversight — use the gradient.

## Accessibility
- The badge is a button with a full accessible name such as "AI-drafted, reviewed by a person. Show details".
- Degrees differ by text and icon, never only by colour or opacity.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for identifiers

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a viewer tell AI involvement without reading documentation?
Does the label survive export, copy and re-upload?
Is the acting agent distinguishable from the human it acts for?
Does disclosure meet the jurisdictions you ship to?