Skip to Content

AI Button

Loading...

Overview

Resources

Loading...

Loading...

Loading...

Loading...

Loading...

Install

yarn 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.

✅ DO

- Generate with AI - Suggest a reply - Improve writing

🚫 DON’T

- Generate - AI Suggestion - Click to Improve

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: ButtonAiButton
  • Props appearance and size are now required (no defaults)
  • Removed pill-gradient-vertical appearance (use pill-gradient instead)
Last updated on