AIBadge
StableA lime-tinted badge with a sparkle that marks content made by AI.
Also known as ai tag, ai chip
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Default
<AIBadge />The standard label for content made by AI.
When to use it
A badge with a sparkle that marks one piece of content as made by AI. It sits on the item itself, so people can tell AI work from human work at a glance.
Made of: Sparkle icon · Label
Use it for
- A generated image, summary or draft.
- A card whose text the assistant wrote.
- Content on a photo or a busy background: turn on solid.
Not for
- A note about the whole conversation: use AIDisclosure.
- AI content that needs an explanation, or an undo after editing: use AILabel.
- Content a person wrote.
Do and avoid
Do
- Put it on anything the AI wrote or made, like summaries or images.
- Keep the label to two words or fewer.
- Place it close to the content it describes, like a corner of a card.
- Use the same words for the same kind of content everywhere.
Avoid
- Do not use it on content a person wrote.
- Do not use it as a general highlight. The sparkle means AI.
- Do not swap it for a plain Badge in the accent color.
- Do not use it in place of AIDisclosure when the whole conversation needs a caution.
On a phone
- AIBadge is not tappable and does not change on a phone.
- Its text is 12px on touch screens.
- Set solid when the badge sits on an image, as on any screen size.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "AI-generated" | Text shown next to the sparkle. |
| solid | boolean | false | Use the opaque lime badge. Set it when the badge sits on an image or another busy background so the text keeps its contrast. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one AIBadge switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Solid | solid | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- solid
- Pass solid for a filled lime badge instead of the soft one.
Tokens
Change one of these and every part that uses it follows.
--lime--fg
Built in
- Screen readers read the label as part of the text around it.
- Screen readers skip the sparkle.
- It cannot be pressed, and the Tab key skips it.
What you need to do
- Use a label that says what the content is, such as "AI summary".
- Turn on solid on images or busy backgrounds, so the text stays readable.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide