> ## Documentation Index
> Fetch the complete documentation index at: https://docs.provenancekit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ProvenanceBadge

> A squircle 'Pr' mark that users can click to inspect the provenance of any piece of content.

> Wrap any content — image, video, text block — and a clickable **"Pr" squircle tag** appears. Clicking it opens a credentials-style popover showing date, producer, AI tool used, license, and verification status.

The badge is intentionally **always dark** (near-black with white text) so it stands out as a provenance mark on any background, regardless of your app's light/dark theme.

<Tabs>
  <Tab title="Preview">
    <Frame>
      <iframe src="https://ui-preview.provenancekit.com/badge" style={{ width: "100%", height: "560px", border: "none", borderRadius: "8px" }} title="ProvenanceBadge preview" />
    </Frame>
  </Tab>

  <Tab title="Code">
    ```tsx theme={"theme":{"light":"github-dark","dark":"github-dark"}}
    import { ProvenanceBadge } from "@provenancekit/ui";

    // Floating "Pr" tag over an image (default — bottom-right corner)
    // Click the badge → popover shows: date, Sarah Kim + Illustrated Digest,
    // Claude Opus 4.6 (editorial polish), CC-BY-4.0, editorial-review verified
    <ProvenanceBadge cid="bafybei..." position="bottom-right">
      <img src="/header-image.png" alt="AI-generated article header" />
    </ProvenanceBadge>

    // Inline badge next to an article byline
    <ProvenanceBadge cid="bafybei..." variant="inline" size="sm">
      <span>By Sarah Kim · AI-assisted · Illustrated Digest</span>
    </ProvenanceBadge>

    // Pre-fetched bundle (skip auto-fetch) + navigate on "View full provenance"
    <ProvenanceBadge
      bundle={myBundle}
      onViewDetail={() => router.push(`/provenance/${cid}`)}
    >
      <video src="/video.mp4" />
    </ProvenanceBadge>
    ```
  </Tab>
</Tabs>

## What the preview shows

The preview demonstrates two real-world scenarios from *"The Illustrated Article"* — a published piece with four contributors:

* **Sarah Kim** (human) — wrote the original draft
* **Illustrated Digest** (organisation) — publisher and editorial team
* **Claude Opus 4.6** (AI) — polished the article text
* **Flux Schnell** (AI) — generated the header image

Clicking either "Pr" badge opens the Content Credentials popover. The **inline variant** is used on the article byline so readers can inspect provenance without covering the content.

## The popover

Clicking the "Pr" tag opens a **provenance credentials card** with clean labeled rows:

| Row                  | Source                                              |
| -------------------- | --------------------------------------------------- |
| **Date**             | Timestamp of the primary action                     |
| **Produced by**      | Primary creator entity name                         |
| **App or tool used** | AI provider + model (from `ext:ai@1.0.0`)           |
| **License**          | License identifier (from `ext:license@1.0.0`)       |
| **Signed with**      | Verification policy (from `ext:verification@1.0.0`) |

Only rows with available data are shown. An optional "View full provenance" button (via `onViewDetail`) navigates to a detail page.

## Font

The "Pr" mark defaults to **Red Hat Display**. If your app already loads Red Hat Display it will be used automatically. Override with the CSS variable:

```css theme={"theme":{"light":"github-dark","dark":"github-dark"}}
:root {
  --pk-badge-font-family: 'Your Font', system-ui, sans-serif;
}
```

To load Red Hat Display from Google Fonts if your app doesn't already include it:

```html theme={"theme":{"light":"github-dark","dark":"github-dark"}}
<link
  href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700;800&display=swap"
  rel="stylesheet"
/>
```

## Props

| Prop           | Type                                                           | Default          | Description                                    |
| -------------- | -------------------------------------------------------------- | ---------------- | ---------------------------------------------- |
| `cid`          | `string`                                                       | —                | Resource CID — auto-fetches bundle             |
| `bundle`       | `ProvenanceBundle`                                             | —                | Pre-fetched bundle (skips auto-fetch)          |
| `children`     | `ReactNode`                                                    | —                | Content to wrap (image, video, text, etc.)     |
| `position`     | `"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"` | `"bottom-right"` | Tag position in floating mode                  |
| `size`         | `"sm" \| "md" \| "lg"`                                         | `"md"`           | Tag size (24 / 32 / 44 px square)              |
| `variant`      | `"floating" \| "inline"`                                       | `"floating"`     | Layout mode                                    |
| `popoverSide`  | `"top" \| "bottom" \| "left" \| "right"`                       | `"bottom"`       | Popover opening direction                      |
| `onViewDetail` | `() => void`                                                   | —                | Called when user clicks "View full provenance" |
| `loadingSlot`  | `ReactNode`                                                    | —                | Custom loading state                           |
| `errorSlot`    | `ReactNode`                                                    | —                | Custom error state                             |
| `className`    | `string`                                                       | —                | Additional CSS class on the wrapper            |

## Customising the badge

```css theme={"theme":{"light":"github-dark","dark":"github-dark"}}
:root {
  --pk-badge-bg:          #0f172a;  /* squircle background */
  --pk-badge-fg:          #f8fafc;  /* "Pr" text colour */
  --pk-badge-font-family: 'Red Hat Display', system-ui, sans-serif;
}
```