AI Link

Overview

Resources

Figma

Install

yarn add @camp/ai-link

Props

Prop	Type	Default
`style` †	`CSSProperties`	—
`onClick` †	`MouseEventHandler<HTMLAnchorElement>`	—
`href` †	`string`	—
`destructive`	`boolean`	—

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

Variations

Default appearance

The default AI Link provides a clean, modern appearance with subtle hover effects and intelligent state management.

import { AiLink } from '@camp/ai-link';
 
const MyAILink = () => <AiLink href="https://activecampaign.com">Visit our website</AiLink>;

Destructive

import { AiLink } from '@camp/ai-link';
 
const MyCustomAILink = () => (
  <AiLink href="https://activecampaign.com" variant="destructive">
    Destructive link with red styling
  </AiLink>
);

With Icon

import { AiLink } from '@camp/ai-link';
import { ExternalLinkSmall } from '@camp/icon';
 
const MyInteractiveAILink = () => (
  <AiLink href="https://activecampaign.com" target="_blank">
    Standard link with icon <ExternalLinkSmall title="External link" />
  </AiLink>
);

Usage

Best practices

Use AI Link for primary navigation elements that benefit from intelligent behavior
Leverage the interactive states for links that require user engagement tracking
Consider the context where the link appears to choose appropriate styling
Use custom styling sparingly to maintain design system consistency

Content guidelines

✅ DO

Use clear, descriptive text that indicates the destination
Keep link text concise and actionable
Provide context when the destination is not obvious
Use appropriate variants for different use cases

🚫 DON’T

Don't use generic text like 'click here' or 'read more'
Don't overload links with too many interactive features
Don't use AI Link for simple, static navigation
Don't ignore accessibility considerations

Accessibility

AI Link maintains the same accessibility standards as traditional links while adding intelligent enhancements:

Keyboard navigation: Full keyboard support with focus indicators
Screen reader compatibility: Proper ARIA labels and descriptions
Focus management: Intelligent focus handling for interactive states
Semantic HTML: Maintains proper link semantics under the hood