AILabel
StableA small lime tag that says content was made by AI and explains how. Once a person edits the content, it becomes an undo button.
Also known as ai generated label, made with ai
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Feature container
Draft reply to the supplier.
<div className="relative w-full max-w-sm rounded-card border border-line bg-surface p-5 pr-16 text-body leading-5 text-fg">
Draft reply to the supplier.
<AILabel level="feature" placed overview="This draft was written from the thread above." details="Nobody has checked it yet." />
</div>Sits at the upper right of a box, a little away from the edge.
When to use it
A small lime tag that marks content as made by AI and opens a note explaining how. Once a person edits the content it turns into an undo button, because the content is no longer purely AI.
Made of: Lime tag · AI mark · Text · Explanation note · Undo button
Use it for
- A box, message, field or image whose content the AI made.
- Explaining what the AI did, with details, links or buttons.
- Letting people go back to the AI version after they edit it.
Not for
- A button that starts AI work: use Button.
- A simple mark with no explanation: use AIBadge.
- A full record of where content came from: use ProvenancePopover.
Do and avoid
Trip summary
Trip summary (auto)
Do
- Put one label on the whole box, not one on every line.
- Keep the label away from the edge of the box.
- Use the buttons part for things like Learn more or Turn off.
- Set edited to true as soon as a person changes the content, so the undo button appears.
- In onRevert, restore the AI version and set edited back to false.
Avoid
- Use the label as a button that starts AI work.
- Put it on content a person wrote.
- Make the label amber. Amber is only for when a person has to act.
- Push the label right up against the edge of a box.
On a phone
- On touch screens the pill keeps its size and has a 44px tap area. The revert button grows to 44px square.
- The explainer opens on tap and closes by tapping outside, and its panel is at most the screen width minus 2rem.
- Buttons in the Actions section wrap onto more lines on a narrow screen.
Seen in products
- Carbon's AI label can mark anything from one word to a whole page. It opens a note with overview, details, links and buttons that stays open until the person clicks or tabs away.
- Carbon puts the label at the upper right of a box, never against the edge. In a form field it sits on the right, centered up and down. In a group of icons it sits at the far left.
- Sizes match the text beside them, and drop one size next to light icon buttons.
- Carbon says not to use the label to start AI work or as decoration.
- When a person edits AI content, Carbon removes the AI look and turns the label into an undo icon. Undoing brings the look back.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| level | "feature" | "message" | "field" | "image" | "feature" | Where the label sits. Feature is the upper right of a container. Field is the right side, vertically centred. Message and image are our own placements. |
| size | 16 | 18 | 22 | 18 | Pill and mark size. Match the adjacent text size. |
| text | string | "AI" | Word in the pill. |
| placed | boolean | false | Apply absolute placement for the level. The parent must be positioned. |
| overview | ReactNode | none | Toggletip section: what the AI did. |
| details | ReactNode | none | Toggletip section: specifics for this instance. |
| resources | ReactNode | none | Toggletip section: links. |
| actions | ReactNode | none | Toggletip section: buttons. The label itself never triggers AI work. |
| edited | boolean | false | Drops the tint and shows the icon-only revert button. |
| onRevert | () => void | none | Called when revert is pressed. The app restores the AI version. |
| revertLabel | string | "Revert to AI version" | Accessible name of the revert button. |
| popoverLabel | string | "About this AI content" | Accessible name of the toggletip panel. |
| className | string | none | Extra classes for the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one AILabel switches all of this from its properties panel, across 64 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Level | level | Feature, Message, Field, Image |
| Placed | placed | On or off |
| Edited | edited | On or off |
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
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.
- hover
- The lime pill darkens slightly under the pointer.
- focus
- A visible focus ring appears on the label button on keyboard focus.
- open
- Pressing the label opens a popover with the overview, details, resources and actions you pass, or a default line if none are passed.
- edited
- Pass edited to replace the pill with a small revert button that calls onRevert.
- placed
- Pass placed to pin the label to a corner or edge of its parent, depending on level.
Tokens
Change one of these and every part that uses it follows.
--lime--lime-hover--on-lime--border--surface-raised--radius-control
Built in
- The tag is a real button. Screen readers hear its words, then "About this AI content", and whether the note is open.
- Opening the note moves the keyboard into it. Escape closes it and returns the keyboard to the tag; tabbing away or clicking outside also closes it.
- Each part of the note is named, such as Overview and Details.
- The undo button shows only an icon, but screen readers hear "Revert to AI version".
- The pressable area is at least 24 pixels tall, and 44 on touch screens.
What you need to do
- Give buttons and links you put in the note their own clear words.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide