Loading…

AI Disclosure

Tells a reader they are looking at AI, and what is actually known about it.

AI
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs popover as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add ai-disclosure

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { AIDisclosure } from "@/components/ui/ai-disclosure";

Examples

Every example the tests run, live and operable, side by side.

Default
Kinds
Conversation
On Media
Provenance
Your Own Wording

API

Generated from the component's own types, so a prop cannot appear here without existing.

<AIDisclosure>

Prop	Type	Default
`kind` (required)	`DisclosureKind`	—
`icon` Replaces the mark. The Commission publishes three icons for this and lets anyone use them without attribution — they are deliberately not bundled here, because an official mark shipped inside a component library ends up on content nobody checked. Bring your own, and the Commission's own words apply: using them "does not establish legal compliance by itself".	`ReactNode`	—
`label` Replaces the default wording. The default is a starting point, not a rule.	`ReactNode`	—
`variant`	`"inline" \| "banner" \| "overlay"`	`"inline"`
`children` A provenance panel, or anything else that belongs after the label.	`ReactNode`	—

Plus every attribute of <div> except children.

<AIDisclosureProvenance>

Prop	Type	Default
`claims` (required) What is being claimed about this content, and by whom. Claims, not findings. They arrive as data — from a C2PA manifest your server read, from your own pipeline, from a vendor — and this renders them.	`ProvenanceClaim[]`	—
`source` Who asserts the claims. Named, because an unattributed claim is a rumour.	`string`	—
`triggerLabel`	`string`	`"Content details"`
`verified` Whether something you trust checked the claims, and said so. Supplied, never computed. Verifying a C2PA manifest means parsing signed COSE and walking a certificate chain; doing that in the browser would mean a wasm blob you cannot read, and "you own the source" would stop being true. It also cannot be trusted client-side even when it succeeds, because the page doing the checking is the page making the claim. Verify on a server and pass the answer down. Left undefined, this says so.	`boolean`	—

Plus every attribute of <button> except children.

Accessibility

The text is the disclosure and the icon is decoration, marked aria-hidden — a sparkle alone is a mark a sighted reader may not decode and a screen reader passes over in silence, which is the exact failure this component exists to prevent. Each of the four kinds carries wording of its own, so the distinction between generated, manipulated and human-reviewed survives for anyone who cannot see the styling. The provenance panel states in words whether anyone checked the claims and who, rather than implying it with a tick, and its three states are told apart by their sentences rather than by colour. Scope: this renders the human-visible disclosures of EU AI Act Article 50(1) and 50(4). It cannot satisfy 50(2), which requires machine-readable marking inside the artifact by whoever generated it, and no React component can. Not legal advice.

Quality

Measured from the source and its tests at build time.

All scores

8/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — fails
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

kind

DisclosureKind

—

icon

Replaces the mark. The Commission publishes three icons for this and lets anyone use them without attribution — they are deliberately not bundled here, because an official mark shipped inside a component library ends up on content nobody checked. Bring your own, and the Commission's own words apply: using them "does not establish legal compliance by itself".

ReactNode

—

label

Replaces the default wording. The default is a starting point, not a rule.

ReactNode

—

variant

"inline" | "banner" | "overlay"

"inline"

children

A provenance panel, or anything else that belongs after the label.

ReactNode

—

Prop

Type

Default

claims

What is being claimed about this content, and by whom. Claims, not findings. They arrive as data — from a C2PA manifest your server read, from your own pipeline, from a vendor — and this renders them.

ProvenanceClaim[]

—

source

Who asserts the claims. Named, because an unattributed claim is a rumour.

string

—

triggerLabel

string

"Content details"

verified

Whether something you trust checked the claims, and said so. Supplied, never computed. Verifying a C2PA manifest means parsing signed COSE and walking a certificate chain; doing that in the browser would mean a wasm blob you cannot read, and "you own the source" would stop being true. It also cannot be trusted client-side even when it succeeds, because the page doing the checking is the page making the claim. Verify on a server and pass the answer down. Left undefined, this says so.

boolean

—