> ## 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.

# AiDisclosureBadge

> EU AI-disclosure badge: an "AI" wordmark on a filled disc, for overlaying on AI-generated or AI-modified media.

```tsx theme={null}
import { AiDisclosureBadge } from "@fanvue/ui";
import type { AiDisclosureBadgeProps, AiDisclosureBadgeTone } from "@fanvue/ui";
```

## Examples

## Default

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

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

<AiDisclosureBadge />
```

## Tones

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

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

<div className="flex gap-4">
  <div className="flex items-center gap-3 rounded-md bg-linear-to-br from-[#e8f5ef] via-[#9fd8c2] to-[#f7fbf9] p-6">
    <AiDisclosureBadge tone="dark" className="size-6" />
    <AiDisclosureBadge tone="transparent" className="size-6" />
  </div>
  <div className="flex items-center gap-3 rounded-md bg-linear-to-br from-[#0e3b2f] via-[#1f8f6a] to-[#0b2b23] p-6">
    <AiDisclosureBadge tone="light" className="size-6" />
    <AiDisclosureBadge tone="transparent" className="size-6" />
  </div>
</div>
```

## Sizes

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

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

<div className="flex items-center gap-4">
  <AiDisclosureBadge className="size-4" />
  <AiDisclosureBadge className="size-6" />
  <AiDisclosureBadge className="size-8" />
</div>
```

## Props

## AiDisclosureBadge

EU AI-disclosure badge: an "AI" wordmark on a filled disc, for overlaying on AI-generated or AI-modified media. Ships at 16px and scales via `className`.

Decorative by default. For standalone use pass `aria-hidden={false}` with `role="img"` and an `aria-label`. For the form that carries wording, use `AiDisclosureLabel`.

<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`: `AiDisclosureBadgeProps`, `AiDisclosureBadgeTone`.

***

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