AI Button

Overview

Resources

Install

yarn add @camp/ai-button

Props

Prop	Type	Default	Description
`appearance`	`"text" \| "primary" \| "secondary" \| "pill" \| "pill-gradient" \| "invalid"`	`primary`	Visual style variant of the button. - `primary`: Emphasis background with on-emphasis text - `secondary`: Default background with border - `text`: Transparent background, text-only appearance - `pill`: Pill-shaped with soft shadow - `pill-gradient`: Pill-shaped with gradient background - `invalid`: Destructive/error state styling
`onClick` †	`MouseEventHandler<HTMLButtonElement>`	—
`size`	`"small" \| "large" \| "medium"`	`large`	Size of the button affecting padding and font size. - `large`: 12px 24px padding, 16px font - `medium`: 8px 16px padding, 14px font - `small`: 4px 8px padding, 12px font
`disabled`	`boolean`	—	Whether the button is disabled. When disabled, opacity is reduced and interactions are prevented.
`themed`	`boolean`	`true`	Whether the component should adapt to theme context. When false, forces light theme.
`type` †	`"button" \| "submit" \| "reset"`	—
`style` †	`CSSProperties`	—
`gradientBorder`	`boolean`	`false`	For secondary and pill appearances, apply a gradient border on hover/focus/active states. Creates an animated gradient border effect using a pseudo-element.
`aria-label` †	`string`	—	Defines a string value that labels the current element. @see aria-labelledby.
`tabIndex` †	`number`	—
`value` †	`string \| number \| readonly string[]`	—
`aria-busy` †	`Booleanish`	—
`aria-pressed` †	`boolean \| "true" \| "false" \| "mixed"`	—	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
`key` †	`Key`	—
`onKeyDown` †	`KeyboardEventHandler<HTMLButtonElement>`	—
`aria-expanded` †	`Booleanish`	—	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`onMouseEnter` †	`MouseEventHandler<HTMLButtonElement>`	—
`onMouseLeave` †	`MouseEventHandler<HTMLButtonElement>`	—
`ref` †	`LegacyRef<HTMLButtonElement>`	—	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
`role` †	`AriaRole`	—

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

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: Button → AiButton
Props appearance and size are now required (no defaults)
Removed pill-gradient-vertical appearance (use pill-gradient instead)