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

# AiDisclosureLabel

> EU AI-disclosure label: an "AI" mark followed by wording, on a filled pill, for marking AI-generated or AI-modified media.

```tsx theme={null}
import { AiDisclosureLabel } from "@fanvue/ui";
import type {
  AiDisclosureLabelProps,
  AiDisclosureLabelSize,
  AiDisclosureLabelTone,
} from "@fanvue/ui";
```

## Examples

## Tones

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aidisclosurelabel--tones&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiDisclosureLabel — Tones" />
</Frame>

```tsx theme={null}
import { AiDisclosureLabel } from "@fanvue/ui";

<div className="flex flex-col gap-4 rounded-md bg-linear-to-br from-[#0e3b2f] via-[#1f8f6a] to-[#35d0a5] p-6">
  <AiDisclosureLabel label="Generated" tone="dark" />
  <AiDisclosureLabel label="Generated" tone="light" />
  <AiDisclosureLabel label="Generated" tone="transparent" />
</div>
```

## Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aidisclosurelabel--sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiDisclosureLabel — Sizes" />
</Frame>

```tsx theme={null}
import { AiDisclosureLabel } from "@fanvue/ui";

<div className="flex items-center gap-4">
  <AiDisclosureLabel label="Modified" size="12" />
  <AiDisclosureLabel label="Modified" size="16" />
  <AiDisclosureLabel label="Modified" size="20" />
</div>
```

## Generated

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aidisclosurelabel--generated&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiDisclosureLabel — Generated" />
</Frame>

```tsx theme={null}
import { AiDisclosureLabel } from "@fanvue/ui";

<AiDisclosureLabel label="Generated" />
```

## Modified

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aidisclosurelabel--modified&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiDisclosureLabel — Modified" />
</Frame>

```tsx theme={null}
import { AiDisclosureLabel } from "@fanvue/ui";

<AiDisclosureLabel label="Modified" />
```

## Translated

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aidisclosurelabel--translated&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiDisclosureLabel — Translated" />
</Frame>

```tsx theme={null}
import { AiDisclosureLabel } from "@fanvue/ui";

<AiDisclosureLabel label="Modifié" />
```

## Props

## AiDisclosureLabel

EU AI-disclosure label: an "AI" mark followed by wording, on a filled pill, for marking AI-generated or AI-modified media.

The wording is live text rather than baked artwork, so it translates and scales with the reader's font settings. It is uppercased in CSS, which keeps the mark consistent without forcing callers to pass shouting strings.

For the compact disc form with no wording, use `AiDisclosureBadge`.

<ParamField path="label" type="string" required>
  Wording after the "AI" mark, e.g. a translated "Generated" or "Modified".
</ParamField>

<ParamField path="size" type="&#x22;12&#x22; | &#x22;16&#x22; | &#x22;20&#x22;" default="20" />

<ParamField path="tone" type="&#x22;dark&#x22; | &#x22;light&#x22; | &#x22;transparent&#x22;" default="dark">
  Colour of the mark itself, chosen for the media behind it.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `AiDisclosureLabelProps`, `AiDisclosureLabelSize`, `AiDisclosureLabelTone`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)