Link

Links help the user navigate the platform, and often sit in line with text. ActiveCampaign utilizes color and underline to indicate a link.

Overview

Resources

Install

yarn add @camp/link

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🛠️ Accessibility and styling improvements: A new implementation is available for Link as='button' which provides styling improvements for different states and improves accessibility to this version of a Link. The Camp Button component will no longer be available as='a' — this is the new and improved version!

Migration steps

1. Update import statements: replace import { Link } from '@activecampaign/camp-compnents-link' with import { Link } from '@camp/link'
2. Check Icon colors:
   • Using Camp 1 Icon: No updates needed for migration (Icon fill should be set to inherit)
   • Using Camp Next Gen Iconnlswvt: If your Link children includes an Icon, you should no longer need to specify the color of the icon in order for it to appear the same color as the link text. If your Icon has a value for fill, this can be removed.

Variations

Primary link

The primary link is used as a standalone link, or when the designer is looking to bring the link to the user’s attention.

Destructive link

The destructive link is used sparingly in the ActiveCampaign platform. For most common destructive actions, such as deletion, a destructive text button could be a better option. If a destructive action takes the user to a new page, the appearance of link can be set to destructive.

Inherit

Sometimes, a link will sit within a sentence. Or, the link is not a primary action on the page, and the color of the link needs to be set to the text around it. Using inherit for the appearance prop will allow the link to inherit the styles around it.

When an Icon is included in the Link’s children, it will inherit the fill color from the parent container. The text will inherit the color, size, and weight.

import { Link } from '@camp/link';
import { ExternalLinkSmall } from '@camp/icon';
import { Space, SemanticColors } from '@camp/tokens';
 
const MyPrimaryLink = () => (
  <Link appearance="primary" href="https://www.activecampaign.com/" target="_blank">
    Primary Link
  </Link>
);
 
const MyDestructiveLink = () => (
  <Link appearance="destructive" href="https://www.activecampaign.com/" target="_blank">
    Destructive Link
  </Link>
);
 
const MyInheritLink = () => (
  <Text
    style={{
      color: SemanticColors['text-success'],
      fill: SemanticColors['icon-decorative-success'],
    }}
    type="body"
    weight="semibold"
    size="xSmall"
  >
    This paragraph has a{' '}
    <Link appearance="inherit" href="https://www.activecampaign.com/" target="_blank">
      <ExternalLinkXSmall style={{ marginRight: Space[2] }} title="External link" />
      link
    </Link>{' '}
    in the middle. It inherits the color, fill, size, and weight of the parent element.
  </Text>
);

Icon in link

An icon can be added to a link to make the accompanying text more clear. This is typically used to indicate what the link will do, such as taking the user to an external website.

To utilize an icon in a link, import the icon as well as the link component. Typically, there should be space-2 (8px) of space between the icon and text in the link.

import { Link } from '@camp/link';
import { ExternalLinkSmall } from '@camp/icon';
import { Space } from '@camp/tokens';
 
const MyLinkComponent = () => (
  <Link appearance="primary" href="https://www.activecampaign.com/" target="_blank">
    Link with icon
    <ExternalLinkSmall style={{ marginLeft: Space[2] }} title="External link" />
  </Link>
);

Link as button

You can add a Link that is styled like a button by passing as='button'. Link appearance values are not allowed when using as='button'— instead, use buttonProps to change the appearance of the button (more info below).

Note: This experience still uses only <a> under the hood while applying styles to give it a button appearance. It will only accept anchor tag attributes . If you attempt to apply button attributes, they will not work. If you need more Button functionality, use Button.

buttonProps

To update the Button appearance, size, loading state, or disabled/destructive state, use the prop buttonProps.

buttonProps shares types with the Camp Next Gen Button and is defined as: Pick<ButtonProps, 'appearance' | 'size' | 'loadingIndicator' | 'destructive' | 'disabled'>. These values can be passed to buttonProps with any combination of the same values as you would use with Button.

import { Link } from '@camp/link';
 
const PrimaryButtonLink = () => (
  <Link
    as="button"
    buttonProps={{
      appearance: 'primary',
    }}
    href="https://www.activecampaign.com/"
    target="_blank"
  >
    Primary Button Link
  </Link>
);
 
const SecondaryButtonLink = () => (
  <Link
    as="button"
    buttonProps={{
      appearance: 'secondary',
    }}
    href="https://www.activecampaign.com/"
    target="_blank"
  >
    Secondary Button Link
  </Link>
);
 
const TextButtonLink = () => (
  <Link
    as="button"
    buttonProps={{
      appearance: 'text',
    }}
    href="https://www.activecampaign.com/"
    target="_blank"
  >
    Text Button Link
  </Link>
);
 
// This is an example implementation with values applied to all available buttonProps
const AllButtonPropsApplied = () => (
  <Link
    as="button"
    buttonProps={{
      appearance: 'text',
      size: 'small',
      loadingIndicator: false,
      destructive: true,
      disabled: false,
    }}
    href="https://www.activecampaign.com/"
    target="_blank"
  >
    Link as button
  </Link>
);

Accessibility

Keyboard interactions

• Move focus to a link using the tab key
• When the link has keyboard focus, use the enter key to interact
  • Link as='button': this currently functions the same as an anchor tag, so space is not currently available as an interaction for this use case