AI Pill edit

AI pill

The AI pill is an inline tag with a Sparkle icon that flags AI-generated or AI-assisted content. This CSS port of mosaic-react SovosAIPill needs no JavaScript.

    
      content_copy
    
    
<span class="ai-pill">
  <span class="ai-pill__icon" aria-hidden="true"></span>AI
</span>
    
  

Indicator

    
      content_copy
    
    
<span class="ai-pill"><span class="ai-pill__icon" aria-hidden="true"></span>AI</span>
<span class="ai-pill">AI</span>
<span class="ai-pill disabled">
  <span class="ai-pill__icon" aria-hidden="true"></span>AI
</span>
    
  

Button

When the pill is clickable, use a native <button type="button"> and always give it an aria-label that describes the action, because “AI” alone does not. Disable it with the disabled attribute. The disabled class only changes how the button looks (grey, no hover colour, no pointer cursor); it can still be focused and clicked.

    
      content_copy
    
    
<button type="button" class="ai-pill" aria-label="Ask Sovi about this invoice">
  <span class="ai-pill__icon" aria-hidden="true"></span>AI
</button>
<button type="button" class="ai-pill" aria-label="Ask Sovi about this invoice" disabled>
  <span class="ai-pill__icon" aria-hidden="true"></span>AI
</button>
    
  

Right-to-left

The component uses logical properties, so its spacing works in RTL layouts.

    
      content_copy
    
    
<div dir="rtl">
  <span class="ai-pill"><span class="ai-pill__icon" aria-hidden="true"></span>AI</span>
  <button type="button" class="ai-pill" aria-label="Ask Sovi about this invoice">
    <span class="ai-pill__icon" aria-hidden="true"></span>AI
  </button>
</div>
    
  

Classes

    
      content_copy
    
    
<span class="ai-pill"><span class="ai-pill__icon" aria-hidden="true"></span>AI</span>
<span class="ai-pill disabled">AI</span>
<button type="button" class="ai-pill" aria-label="Ask Sovi about this invoice" disabled>AI</button>