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

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

With icon

Toggle dark mode

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

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

<CertaraLink href="/test" icon="arrow-up-right-from-square" target="_blank">
  With 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" icon="arrow-up-right-from-square" target="_blank">
  With 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	Optional trailing icon. Use the standard name of the icon from Font Awesome

innerClassName

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

rel

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

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

There are no slots available for this component