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

Install


yarn add @camp/ai-icon-button

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 one appearance available, secondary.

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 one appearance available, 'secondary'
<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>
 
// 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>

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="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>

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