AI Icon Button

AI Icon Buttons provide instant actions with intelligent context awareness, using icons in place of text labels for AI-powered interfaces.

Overview

Resources

Changelog

Source code

Storybook

Figma

Install

yarn add @camp/ai-icon-button

Props

Prop	Type	Default	Description
`onClick` †	`MouseEventHandler<HTMLButtonElement>`	—
`appearance` *	`"primary" \| "secondary" \| "tertiary" \| "transparent"`	—	for circle: 'primary' \| 'secondary' \| 'tertiary' for rectangle: 'secondary' \| 'transparent'
`size`	`"small" \| "medium"`	`small`	only applied if shape is 'rectangle'
`shape` *	`"circle" \| "rectangle"`	—	shape of the icon button
`aria-label` †	`string`	—	Defines a string value that labels the current element. @see aria-labelledby.
`disabled` †	`boolean`	—
`onKeyDown` †	`KeyboardEventHandler<HTMLButtonElement>`	—
`tabIndex` †	`number`	—
`className` †	`string`	—
`aria-pressed` †	`boolean \| "true" \| "false" \| "mixed"`	—	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
`id` †	`string`	—
`style` †	`CSSProperties`	—
`type` †	`"button" \| "submit" \| "reset"`	—
`themed`	`boolean`	`true`	`true` (default) follows the surrounding theme; `false` pins the light theme for the button's background, icon fill, hover, active and focus styles. Parents that expose their own `themed` prop (e.g. `AiBanner`) forward it here so a light-pinned surface stays light.

Generated from @camp/ai-icon-button@12.7.2 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Variations

AI icon buttons are available in multiple appearances and sizes to fit various AI-powered contexts and interfaces.

Appearances

The AI icon button supports the same visual appearances as regular icon buttons, with enhanced intelligent behavior for AI contexts.

The Rectangle shape has two appearances available, secondary and transparent. transparent is covered in its own section below.

The Circle shape has three appearances available, primary, secondary, and tertiary.

import { AiIconButton } from '@camp/ai-icon-button';
import { AddSmall, AddMedium, CloseSmall } from '@camp/icon';
 
// Shape = 'rectangle' has two appearances available, 'secondary' and 'transparent'
<AiIconButton shape="rectangle" size="small" appearance="secondary">
  <AddSmall title="Add small icon" />
</AiIconButton>
 
<AiIconButton shape="rectangle" size="medium" appearance="secondary">
  <AddMedium title="Add medium icon" />
</AiIconButton>
 
<AiIconButton shape="rectangle" size="small" appearance="transparent">
  <CloseSmall title="Close small icon" />
</AiIconButton>
 
// Shape = 'circle' has three appearances available, 'primary', 'secondary', and 'tertiary'
<AiIconButton shape="circle" size="small" appearance="primary">
  <AddSmall title="Add small icon" />
</AiIconButton>
 
<AiIconButton shape="circle" size="small" appearance="secondary">
  <CloseSmall title="Close small icon" />
</AiIconButton>
 
<AiIconButton shape="circle" size="small" appearance="tertiary">
  <AddSmall title="Add small icon" />
</AiIconButton>

Transparent

transparent is a Rectangle-only appearance with no background at rest, so the button can sit on a tinted or colored surface without adding a box of its own. Hover and active use the same default background tokens as the secondary rectangle, the focus ring is unchanged, and disabled lowers the opacity like every other appearance. This is the appearance the Banner uses for its dismiss control.

import { AiIconButton } from '@camp/ai-icon-button';
import { CloseMedium, CloseSmall } from '@camp/icon';
 
<AiIconButton shape="rectangle" size="small" appearance="transparent" aria-label="Dismiss">
  <CloseSmall title="Dismiss" />
</AiIconButton>
 
<AiIconButton shape="rectangle" size="medium" appearance="transparent" aria-label="Dismiss">
  <CloseMedium title="Dismiss" />
</AiIconButton>

Sizes

The Rectangle shape has two sizes available, small and medium. For the small size, use the small icon size. For the medium size, use the medium icon size.

import { AiIconButton } from '@camp/ai-icon-button';
import { AddMedium, AddSmall } from '@camp/icon';
 
<AiIconButton shape="rectangle" size="small" appearance="secondary">
  <AddSmall title="Add small icon" />
</AiIconButton>
 
<AiIconButton shape="rectangle" size="medium" appearance="secondary">
  <AddMedium title="Add medium icon" />
</AiIconButton>

Disabled state

The disabled state is available for both the Rectangle and Circle shapes.

import { AiIconButton } from '@camp/ai-icon-button';
import { AddSmall, CloseSmall } from '@camp/icon';
 
<AiIconButton shape="rectangle" size="small" appearance="secondary" disabled>
  <AddSmall title="Add small icon" />
</AiIconButton>
 
<AiIconButton shape="rectangle" size="medium" appearance="secondary" disabled>
  <AddMedium title="Add medium icon" />
</AiIconButton>
 
<AiIconButton shape="rectangle" size="small" appearance="transparent" disabled>
  <CloseSmall title="Close small icon" />
</AiIconButton>
 
<AiIconButton shape="circle" size="small" appearance="primary" disabled>
  <AddSmall title="Add small icon" />
</AiIconButton>
 
<AiIconButton shape="circle" size="small" appearance="secondary" disabled>
  <CloseSmall title="Close small icon" />
</AiIconButton>
 
<AiIconButton shape="circle" size="small" appearance="tertiary" disabled>
  <AddSmall title="Add small icon" />
</AiIconButton>

Production Examples

More states from @camp/ai-icon-button's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Rectangle Small Disabled

import { AiIconButton } from '@camp/ai-icon-button';
 
<AiIconButton
  shape="rectangle"
  appearance="secondary"
  disabled
>
  {<AddSmall title="Add small icon" />}
</AiIconButton>

Rectangle Medium Disabled

import { AiIconButton } from '@camp/ai-icon-button';
 
<AiIconButton
  shape="rectangle"
  size="medium"
  appearance="secondary"
  disabled
>
  {<AddMedium title="Add medium icon" />}
</AiIconButton>

Rectangle Transparent Small Disabled

import { AiIconButton } from '@camp/ai-icon-button';
 
<AiIconButton
  shape="rectangle"
  appearance="transparent"
  disabled
>
  {<AddSmall title="Add small icon" />}
</AiIconButton>

Rectangle Transparent Medium Disabled

import { AiIconButton } from '@camp/ai-icon-button';
 
<AiIconButton
  shape="rectangle"
  size="medium"
  appearance="transparent"
  disabled
>
  {<AddMedium title="Add medium icon" />}
</AiIconButton>

Circle Secondary Disabled

import { AiIconButton } from '@camp/ai-icon-button';
 
<AiIconButton
  shape="circle"
  appearance="secondary"
  disabled
>
  {<CloseSmall title="Close small icon" />}
</AiIconButton>

Circle Secondary

import { AiIconButton } from '@camp/ai-icon-button';
 
<AiIconButton
  shape="circle"
  appearance="secondary"
>
  {<CloseSmall title="Close small icon" />}
</AiIconButton>

4 more variations in Storybook

Accessibility

Keyboard support

Move focus to an AI icon button using the tab key
When the button has keyboard focus, use the space or enter key to perform the AI action
All AI icon buttons must include descriptive aria-label attributes that explain the AI functionality

Replacing this component in ACF App

If you're currently using the standard icon button (@/icon-button) in ACF App, you can upgrade to the AI icon button for enhanced AI-powered functionality.

Migration example

// Before
import { IconButton } from '@/icon-button';
import { LightningMedium } from '@camp/icon';
 
<IconButton shape="circle" appearance="secondary" onClick={handleAIAction}>
  <LightningMedium />
</IconButton>;
 
// After
import { AiIconButton } from '@camp/ai-icon-button';
import { LightningMedium } from '@camp/icon';
 
<AiIconButton shape="circle" appearance="secondary" onClick={handleAIAction}>
  <LightningMedium />
</AiIconButton>;

Breaking changes

Component name changed from IconButton to AiIconButton
Import path changed from @/icon-button to @camp/ai-icon-button
All existing props (shape, size, appearance) remain the same