Link

Hyperlink component for the Certara Design System

Code

Framework

HTML

React

Angular

Default

Link

Toggle dark mode

<certara-link href="/test">Link</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test">Link</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test">Link</certara-link>

Target

Link with target

Toggle dark mode

<certara-link href="/test" target="_blank">Link with target</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test" target="_blank">Link with target</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test" target="_blank">Link with target</certara-link>

Rel

Noopener

Toggle dark mode

<certara-link href="/test" rel="noopener">Noopener</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test" rel="noopener">Noopener</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test" rel="noopener">Noopener</certara-link>

Download

Download file

Toggle dark mode

<certara-link inner-class-name="text-underline" href="/test" download="file.txt">
  Download file
</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink innerClassName="text-underline" href="/test" download="file.txt">
  Download file
</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link inner-class-name="text-underline" href="/test" download="file.txt">
  Download file
</certara-link>

Icon right

This is the typical pattern for a link to an external source

With trailing icon

Toggle dark mode

<certara-link href="/test" right-icon="arrow-up-right-from-square" target="_blank">
  With trailing icon
</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test" rightIcon="arrow-up-right-from-square" target="_blank">
  With trailing icon
</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test" right-icon="arrow-up-right-from-square" target="_blank">
  With trailing icon
</certara-link>

Icon left

With leading icon

Toggle dark mode

<certara-link href="/test" left-icon="arrow-right" target="_blank">With leading icon</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test" leftIcon="arrow-right" target="_blank">With leading icon</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test" left-icon="arrow-right" target="_blank">With leading icon</certara-link>

Inner Classname

Note the underline is achieved with an inner-class-name

Inner class name

Toggle dark mode

<certara-link inner-class-name="text-underline" href="/test">Inner class name</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink innerClassName="text-underline" href="/test">Inner class name</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link inner-class-name="text-underline" href="/test">Inner class name</certara-link>

Size

Small

Small-sized link

Toggle dark mode

<certara-link href="/test" size="sm">Small-sized link</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test" size="sm">Small-sized link</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test" size="sm">Small-sized link</certara-link>

Base

Base-sized link

Toggle dark mode

<certara-link href="/test" size="base">Base-sized link</certara-link>

import { CertaraLink } from '@certara/certara-ui-react';

<CertaraLink href="/test" size="base">Base-sized link</CertaraLink>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-link href="/test" size="base">Base-sized link</certara-link>

Default

By default, links inherit the font-size of the parent

Inherit large size

Inherit medium size

Inherit base size

Inherit small size

Toggle dark mode

<p class="text-lg">
  <certara-link href="/test">Inherit large size</certara-link>
</p>
<p class="text-md">
  <certara-link href="/test">Inherit medium size</certara-link>
</p>
<p>
  <certara-link href="/test">Inherit base size</certara-link>
</p>
<p class="text-sm">
  <certara-link href="/test">Inherit small size</certara-link>
</p>

import { CertaraLink } from '@certara/certara-ui-react';

<p className="text-lg">
  <CertaraLink href="/test">Inherit large size</CertaraLink>
</p>
<p className="text-md">
  <CertaraLink href="/test">Inherit medium size</CertaraLink>
</p>
<p>
  <CertaraLink href="/test">Inherit base size</CertaraLink>
</p>
<p className="text-sm">
  <CertaraLink href="/test">Inherit small size</CertaraLink>
</p>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<p class="text-lg">
  <certara-link href="/test">Inherit large size</certara-link>
</p>
<p class="text-md">
  <certara-link href="/test">Inherit medium size</certara-link>
</p>
<p>
  <certara-link href="/test">Inherit base size</certara-link>
</p>
<p class="text-sm">
  <certara-link href="/test">Inherit small size</certara-link>
</p>

certara-link

Properties

download

Attribute	download
Type	string
Default	undefined
Required	false
Description	String that points to an optional linked download resource

href

Attribute	href
Type	string
Default	undefined
Required	false
Description	URL string

icon

Attribute	icon
Type	string
Default	undefined
Required	false
Description	Icon name to appear on the right. DEPRECATED. Use right-icon instead. Will be removed in the next major version.

innerClassName

Attribute	inner-class-name
Type	string
Default	undefined
Required	false
Description	String adds class attribute to the actual link element

leftIcon

Attribute	left-icon
Type	string
Default	undefined
Required	false
Description	Icon name to appear on the left. List of available Font Awesome icons

rel

Attribute	rel
Type	string
Default	undefined
Required	false
Description	Optional space-delimited string to define relationship between link type and resource. Values

rightIcon

Attribute	right-icon
Type	string
Default	undefined
Required	false
Description	Icon name to appear on the right. List of available Font Awesome icons

size

Attribute	size
Type	"base" | "sm"
Default	undefined
Required	false
Description	Visual size of link

target

Attribute	target
Type	"_blank" | "_parent" | "_self" | "_top" | "_unfencedTop"
Default	undefined
Required	false
Description	Target to be used in tandem with href if necessary

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	The default slot