AI Link

Overview

Resources

Install

yarn add @camp/ai-link

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

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