AI Button
Loading...
Overview
Resources
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:
Button
→AiButton
- Props
appearance
andsize
are now required (no defaults) - Removed
pill-gradient-vertical
appearance (usepill-gradient
instead)
Last updated on