AI Button

• Component overview: A pill-shaped button for AI entry points — an AI gradient stroke plus a gradient sparkle icon highlight the AI action.
• Size baseline: Medium=44px, Small=36px.
• Implementation note: Standalone AiButton in the design layer; the gradient stroke uses a padding-box / border-box dual background (inline style). The sparkle is injected via the icon contract (askAi key) like every other icon — design ships no icon SVG.
• Figma spec

Basic usage

Result

Loading...

Live Editor

<AiButton>Ask AI</AiButton>

Sizes

Two sizes: Medium (44px) and Small (36px).

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
  <AiButton size="medium">Ask AI</AiButton>
  <AiButton size="small">Ask AI</AiButton>
</div>

Show Stroke

Toggle the AI gradient stroke with showStroke. When off, the button keeps a solid white background with the interaction shadows.

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
  <AiButton showStroke>With stroke</AiButton>
  <AiButton showStroke={false}>No stroke</AiButton>
</div>

Size spec

Dimension	Medium	Small
Height	44px	36px
Horizontal padding	--Spacing_24	--Spacing_12
Vertical padding	--Spacing_12	--Spacing_8
Font	Body (14 / 20)	Footnote (13 / 18)
Icon	20×20	20×20
Radius	full (pill)	full (pill)
Gradient stroke	2px #8F53ED → #00D0FF → #21EF6A	same

Interaction shadows: Default 0 4 12 rgba(22,215,181,0.1) (AI glow) / Hover 0 0 24 --Effects-Shadow-Emphasized / Clicked 0 0 32 --Effects-Shadow-Default.

Props

Prop	Type	Default	Description
children	ReactNode	-	Button label
size	'medium' | 'small'	'medium'	Size variant
showStroke	boolean	true	Whether to show the AI gradient stroke
disabled	boolean	false	Disabled state
onClick	(e) => void	-	Click handler
className	string	-	Extra class names