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 @activecampaign/camp-components-link

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. By default, the appearance is set to primary and the link will appear ocean500 in color.

import Link from '@activecampaign/camp-components-link';
 
<Link href="https://www.activecampaign.com/">Click me</Link>;

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.

 
<Text as="p" color="slate600" family="ffStandard" height="lh300" size="fs300">
  This paragraph has a{' '}
  <Link appearance="inherit" href="https://www.activecampaign.com/">
    link
  </Link>{' '}
  in the middle of it.
</Text>

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, theappearance of link can be set to destructive.

import Link from '@activecampaign/camp-components-link';
 
<Link appearance="destructive" href="https://www.activecampaign.com/">
  Click me
</Link>;

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 sp-300 (8px) of space between the icon and text in the link. Note that color of the icon will also need to be set using the fill property.

import Link from '@activecampaign/camp-components-link';
import { ExternalLink } from '@activecampaign/camp-components-icon';
 
<Link href="https://www.activecampaign.com/" target="_blank">
  <ExternalLink decorative fill="inherit" mr="sp300" size="small" />
  Export
</Link>;