Skip to content
Atomus

AI label

Marks anything an AI wrote or changed. With an explanation it opens a popover that says why the person sees this and which model made it. Once the person edits the content, it reads “Edited” and offers “Revert to AI”.

AIAI generatedDraft by AIAI summaryAI generated
sizes xs · sm · md · inline · icon · with explanation popoverLive · light and dark follow the theme switch

Add the source to a shadcn project

npx shadcn@latest add https://docs.atomus.io/r/ai-label.jsonOpen in v0

Installs the component source, its CSS and the Atomus tokens into components/atomus/. How the registry works

Edited and revert to AI

Section titled “Edited and revert to AI”

Edit the text: the label switches to “Edited” and its popover offers “Revert to AI”.

edited · onRevertLive · light and dark follow the theme switch

In Figma

Section titled “In Figma”

From guidelines/components/ai-label.md

Properties, variants and anatomy of the Figma components. React props use the same names.

AI label

Section titled “AI label”

Marks AI-generated content and is the entry point to explainability: a pill with the gradient AI mark and a short word (“AI”, “AI generated”). With an explanation it becomes a button that opens a popover: why the person sees this, which model made it, and — once they edited the content — “Revert to AI”. Part of the Agent kit.

Figma: component set AI label on the 🤖 Agent kit page of Atomus 4.0 (node 25543:123), connected to React with Code Connect. The explainability popover is the separate component AI label popover (node 25543:124). React props use the same names as the Figma properties below.

Property Type / options
Label text (“AI”)
Size xs 20 · sm 24 · md 28
Style Chip · Inline · Icon
Explainability popover boolean + content
Model text
Edited boolean (off)
Revert to AI boolean (on when Edited)

Anatomy

  1. AI mark: a sparkle filled with --gradient-ai.
  2. Label in text-ai on bg-ai-subtle with a border-ai hairline.
  3. Chevron when it opens a popover.
  4. Popover: gradient top edge, title, explanation, footer with the model and “Revert to AI”.

Edited

When a person changes AI content, the label reads “Edited”, loses the AI tint and shows a pencil. The popover keeps the explanation and offers “Revert to AI”, which restores the generated content.

Use for

  • Next to anything an AI wrote or changed: messages, summaries, generated fields, table cells, images.
  • Field labels of inputs that an AI prefilled.

Not for

  • Marketing badges (“New”, “Pro”): use Badge.
  • Decoration — the AI tint and gradient only identify AI content.

Accessibility

  • The icon style keeps the label as visually hidden text.
  • With a popover, the label is a button with aria-expanded; the popover is a non-modal dialog named by its title. Esc and an outside click close it and return focus.
  • AI content is never marked by colour or gradient alone — the word stays.

Usage

Section titled “Usage”
import { AILabel } from '@stanvision/atomus-react';


<AILabel
  label="AI generated"
  explanation={<p>Written from the 14 comments on this pull request.</p>}
  model="Atomus Pro"
  edited={text !== generated}
  onRevert={() => setText(generated)}
/>

Props at a glance

Section titled “Props at a glance”

Full types and defaults are in React API at the end of the page.

  • label, size (xs · sm · md), variant (chip · inline · icon).
  • explanation, explanationTitle and model fill the popover.
  • edited switches to “Edited”; onRevert adds “Revert to AI”.

Design guidance

Section titled “Design guidance”

From the Figma guidelines.

Do

  • Label every piece of AI-generated content in the same way across the product.
  • Say in the explanation where the content came from and what to check.
  • Offer “Revert to AI” whenever people can edit generated content.

Forbidden

  • Never use --gradient-ai, bg-ai-subtle or border-ai on content that is not AI.
  • Never hide the label once the person has edited the content — switch it to Edited.
  • Never put actions other than Revert to AI and links to settings in the popover.

React API

Section titled “React API”

Generated from react/src/components by scripts/gen-react-api.mjs — the same tables agents read in guidelines/components/ai-label.md.

Use only these props; anything else is not part of the API.

AILabel

Section titled “AILabel”

Figma: AI label — marks AI-generated content and is the entry point to explainability. With explanation it is a button with a non-modal popover (Esc and outside click close it).

import { AILabel } from '@stanvision/atomus-react'; — source: react/src/components/ai/AILabel.tsx

Prop Type Default Description
label string 'AI' Figma: Label — the visible word. Keep it short: “AI”, “AI generated”, “Draft by AI”.
size 'xs' | 'sm' | 'md' 'sm' Figma: Size — xs 20 · sm 24 · md 28
variant 'chip' | 'inline' | 'icon' 'chip' Figma: Style. chip (default) — tinted pill with the gradient mark. inline — mark and text, no fill; for message headers and table cells. icon — the mark only; the label stays available to screen readers.
explanation ReactNode — Figma: Explainability popover. Short, plain-language answer to “why am I seeing this?”. When set, the label becomes a button that opens the popover.
explanationTitle string 'About this AI content' Figma: Popover title — defaults to “About this AI content”.
model string — Model or agent that produced the content, shown in the popover footer.
edited boolean false Figma: Edited — the person changed the AI content; the label reads “Edited” and loses the AI fill.
onRevert () => void — Figma: Revert to AI — shows a “Revert to AI” action in the popover (only while edited).
align 'start' | 'end' 'start' Which edge of the label the popover lines up with; use end near the right edge of a layout
defaultOpen boolean — Start with the popover open (docs and tests)
className string — Extra class on the root element (layout only — never restyle colours or sizes).

Accepts only the props above.