Article 50 Kit
PATTERN 01 / 04 Article 50(1)

AI Disclosure Badge

Tell people, clearly, that they are interacting with an AI system. Article 50(1) requires this wherever it would not already be obvious — chat, voice, generated replies, agents.

01 / 04

Playground

Change the variant and see the badge in a live assistant message.

Preview
AYou are interacting with an AI system. Responses are generated automatically and may be inaccurate.

Your appointment is booked for Thursday at 10:00. Would you like a reminder the day before?

Controls

Variant
02 / 04

Usage

import AIDisclosureBadge from './kit/AIDisclosureBadge';

// A chip beside an AI-authored message
<AIDisclosureBadge />

// A full banner at the top of a chat
<AIDisclosureBadge
  variant="banner"
  infoHref="/how-our-assistant-works"
/>
03 / 04

Props

Prop Type Notes
variant'chip' | 'inline' | 'banner'Visual form. Default chip.
labelstringShort visible text. Default "AI".
descriptionstringFull sentence read by screen readers; shown in the banner.
infoHrefstringOptional link explaining how the AI works.
04 / 04

Accessibility

  • Uses role="note" so it is announced as an aside, not skipped as decoration.
  • The full disclosure sentence is always in the accessibility tree, even when the visible label is a short chip.
  • The sparkle icon is aria-hidden — meaning never depends on the icon or colour alone.
  • When infoHref is set, the link is keyboard focusable with a visible focus ring.