AI Button

Overview

Resources

Install

pnpm add @camp/ai-button

Variations

The AI Button is available in multiple appearances and sizes to fit various contexts.

Appearances

• Primary: The primary appearance is used for the main call to action.
• Secondary: The secondary appearance is used for less prominent actions.
• Text: The text appearance gives the button the look of a link, for tertiary actions.
• Pill: The pill appearance is a rounded button.
• Pill Gradient: The pill-gradient appearance provides a visually distinct style for AI-powered suggestions.
• Invalid: The invalid appearance is used to indicate that the action is not available or not valid.

 
<AiButton appearance="primary">Primary</AiButton>
<AiButton appearance="secondary">Secondary</AiButton>
<AiButton appearance="text">Text</AiButton>
<AiButton appearance="pill">Pill</AiButton>
<AiButton appearance="pill-gradient">Pill Gradient</AiButton>
<AiButton appearance="invalid">Invalid</AiButton>

Sizes

The AI Button is available in small, medium, and large sizes.

 
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
  <AiButton size="large">Large</AiButton>
  <AiButton size="medium">Medium</AiButton>
  <AiButton size="small">Small</AiButton>
</div>

Disabled

The button can be disabled to prevent user interaction.

 
<AiButton disabled>Disabled</AiButton>

Usage

Content guidelines

Button labels should be clear and concise, in sentence case, and with no punctuation.

Accessibility

Keyboard support

• Tab: Moves focus to the button.
• Enter/Space: Activates the button.

Replacing this component in ACF Agent App

Replace the existing @/components/button with @camp/ai-button:

// Before
import { Button } from '@/components/button';
<Button>Generate content</Button>;
 
// After
import { AiButton } from '@camp/ai-button';
<AiButton appearance="primary" size="large">
  Generate content
</AiButton>;

Breaking changes:

• Component name: Button → AiButton
• Props appearance and size are now required (no defaults)
• Removed pill-gradient-vertical appearance (use pill-gradient instead)