Disclosure Badge

Trust component

<loquix-disclosure-badge> states plainly that content came from an AI. It renders an action verb and an agent name — “Generated by Claude”, “Summarized by Assistant” — in one of three shapes.

loquix-disclosure-badgefour actionsthree variants

Preview

Disclosure variants Live component

Usage

import '@loquix/core/define/define-disclosure-badge';

<loquix-disclosure-badge agent-name="Claude" action="generated"></loquix-disclosure-badge>

Actions and variants

Action	Reads as
generated	The AI produced the content.
summarized	The AI condensed something longer.
rewrote	The AI reworked text a human wrote.
suggested	The AI proposed it; a human chose to keep it.

Variant	Appearance
label	Text pill. The default.
icon	Compact icon with the text as its accessible name.
banner	Full-width strip above or below the content.

Disclosure may be a legal requirement

Several jurisdictions require AI-generated content to be labeled, and the rules differ on wording and placement. Treat this component as the presentation, not as legal advice about whether and how you must disclose.

Properties

Property	Attribute	Type	Default	Description
agentName	agent-name	string	'AI'	Name shown after the action verb.
action	action	'generated' | 'summarized' | 'rewrote' | 'suggested'	'generated'	What the AI did.
variant	variant	'label' | 'icon' | 'banner'	'label'	Visual shape.

CSS parts

Part	Purpose
badge	The badge element.

CSS custom properties

Variable	Purpose
--loquix-disclosure-bg	Background color.
--loquix-disclosure-text-color	Text color.
--loquix-disclosure-border-radius	Border radius. Defaults to a pill.
--loquix-disclosure-font-size	Font size.
--loquix-disclosure-padding	Inner padding.