AIBadge

Marks generated content. Composes Badge for pill chrome, so it sits at the same height as every other label in the kit.

Examples

Variants

AI AI AI AI draft

<AIBadge />
<AIBadge variant="neutral" />
<AIBadge variant="outline" />
<AIBadge label="AI draft" />

Sizes and glyph

AI AI AI

<AIBadge size="sm" />
<AIBadge size="md" />
<AIBadge icon={false} />

Shimmer

Opt-in, for the moment content is streaming. Stops under prefers-reduced-motion.

AI Generating Thinking Drafting

<AIBadge shimmer />
<AIBadge shimmer label="Generating" />
<AIBadge shimmer variant="neutral" label="Thinking" />
<AIBadge shimmer variant="outline" label="Drafting" />

Props

Prop	Type	Default	Description
`label`	`string`	`'AI'`	Badge text.
`variant`	`'accent' \| 'neutral' \| 'outline'`	`'accent'`	Passed through to Badge.
`size`	`'sm' \| 'md'`	`'md'`	Passed through to Badge.
`icon`	`boolean`	`true`	Leading sparkle glyph.
`shimmer`	`boolean`	`false`	Sweep a highlight across the text while content streams.

Install

CLI

npx @a3tai/mittsu add ai-badge