AiLabel
Carbon's AI surface marker. Used to indicate a UI region where AI assistance is active (suggestions, generated text, automated decisions). Renders a sparkle glyph on a tinted background.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { AiLabel } from "@avala/design"; <AiLabel mode="inline">AiLabel</AiLabel>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
primitives-ailabel--defaultOpen in Storybook →
When to use
- Mark a region of the UI where AI assistance is active or contributed to the rendered content.
- Pair
mode="button"with a `Slug` (variant="ai") popover that shows the AI's reasoning / source. - Use
mode="inline"next to a piece of generated text to flag its provenance.