v1.0.0
⌘ K
Components
AI Pill
The AI Pill marks content or features that are powered by AI.
Stable
GitHub
Overview
Guidelines
AI
Show code
Props
Name
Type
Description
children
ReactNode
Label rendered next to the sparkles icon.
When to use
To mark content or a feature that is
generated or powered by AI
, such as a suggested reply or a summary.
When not to use
Don’t use it for anything that is not AI. For regular status or tags, use
Pill
.
Don’t use it as an interactive control. Like Pill, it is display-only.
How to use
The sparkles icon and gradient border are built in. Only provide the label.
Keep labels short, 1–3 words in Title Case.
AI
Smart Reply
Accessibility
The icon is decorative and hidden from assistive technology. The label carries the meaning.
The AI Pill is never focusable.
