AiBadge

Animated AI-powered indicator badge.

Available inreactangular

Preview

Live previewreal component

AIAI GeneratedBeta

Install

TerminalBash

$ npx @mcp-elements/cli add ai-badge

Usage

ai-badge-example.tsxTSX

import { AiBadge } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <AiBadge>AI</AiBadge>
      <AiBadge variant="prominent">AI Generated</AiBadge>
      <AiBadge variant="subtle" showIcon={false}>Beta</AiBadge>
    </div>
  )
}

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'prominent' \| 'subtle'`	`'default'`	Visual style of the badge
`showIcon`	`boolean`	`true`	Whether to show the sparkle icon
`children`	`React.ReactNode`	—	Label text displayed inside the badge