Hyperlink

minimal usage

Show editable code example

Any Paragon component or export may be added to the code example.

<Hyperlink destination="https://www.edx.org">
  edX.org
</Hyperlink>

<Hyperlink destination="https://www.edx.org">
  edX.org
</Hyperlink>

with blank target

Show editable code example

Any Paragon component or export may be added to the code example.

<Hyperlink destination="https://www.edx.org" target="_blank">
  edX.org
</Hyperlink>

<Hyperlink destination="https://www.edx.org" target="_blank">
  edX.org
</Hyperlink>

blank target without Icon

Show editable code example

Any Paragon component or export may be added to the code example.

<Hyperlink destination="https://www.edx.org" target="_blank" showLaunchIcon={false}>
  edX.org
</Hyperlink>

<Hyperlink destination="https://www.edx.org" target="_blank" showLaunchIcon={false}>
  edX.org
</Hyperlink>

with onClick

Show editable code example

Any Paragon component or export may be added to the code example.

<Hyperlink
  destination="https://www.edx.org"
  target="_blank"
  onClick={e => {
    e.preventDefault();
    console.log('click');
  }}
>
  edX.org
</Hyperlink>

<Hyperlink
  destination="https://www.edx.org"
  target="_blank"
  onClick={e => {
    e.preventDefault();
    console.log('click');
  }}
>
  edX.org
</Hyperlink>

with icon

Show editable code example

Any Paragon component or export may be added to the code example.

<Hyperlink destination="https://www.edx.org">
  <Icon
    id="SampleIcon"
    src={Add}
    className="fa fa-book"
    screenReaderText="Visit edX Home"
  />
</Hyperlink>

<Hyperlink destination="https://www.edx.org">
  <Icon
    id="SampleIcon"
    src={Add}
    className="fa fa-book"
    screenReaderText="Visit edX Home"
  />
</Hyperlink>

color variants

Show editable code example

Any Paragon component or export may be added to the code example.

<div className="d-flex flex-column">
    <Hyperlink destination="https://www.edx.org">
      Default
    </Hyperlink>
    
    <Hyperlink variant="muted" destination="https://www.edx.org">
      Muted
    </Hyperlink>
    
    <Hyperlink variant="brand" destination="https://www.edx.org">
      Brand
    </Hyperlink>
</div>

<div className="d-flex flex-column">
    <Hyperlink destination="https://www.edx.org">
      Default
    </Hyperlink>
    
    <Hyperlink variant="muted" destination="https://www.edx.org">
      Muted
    </Hyperlink>
    
    <Hyperlink variant="brand" destination="https://www.edx.org">
      Brand
    </Hyperlink>
</div>

link variants

Show editable code example

Any Paragon component or export may be added to the code example.

<div className="row">
  <div className="col-2">
    <Hyperlink destination="https://www.edx.org">
      Standalone
    </Hyperlink>
  </div>
    
  <div className="col-2">
    <Hyperlink isInline destination="https://www.edx.org">
      Inline
    </Hyperlink>
  </div>
</div>

<div className="row">
  <div className="col-2">
    <Hyperlink destination="https://www.edx.org">
      Standalone
    </Hyperlink>
  </div>
    
  <div className="col-2">
    <Hyperlink isInline destination="https://www.edx.org">
      Inline
    </Hyperlink>
  </div>
</div>

with custom link element (e.g., using a router)

Hyperlink typically relies on the standard HTML anchor tag (i.e., a); however, this behavior may be overriden when the destination link is to an internal route where it should be using routing instead (e.g., Link from React Router).

Show editable code example

Any Paragon component or export may be added to the code example.

<Hyperlink
  as={GatsbyLink}
  to="/components/button"
>
  Button
</Hyperlink>

<Hyperlink
  as={GatsbyLink}
  to="/components/button"
>
  Button
</Hyperlink>

Theme Variables#

CSS Variable	Computed Value
‌	‌
‌	‌
‌	‌
‌	‌
‌	‌

Props API#

Hyperlink Props API

as ElementType
specifies the component element type to render for the hyperlink.
Default'a'
destination string
specifies the URL; required if as prop is a standard anchor tag
children ReactNode Required
Content of the hyperlink
className string
Custom class names for the hyperlink
externalLinkAlternativeText string
Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab")
externalLinkTitle string
Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab").
variant 'default' | 'muted' | 'brand'
type of hyperlink
Default'default'
isInline boolean
Display the link with an underline. By default, it is only underlined on hover.
Defaultfalse
showLaunchIcon boolean
specify if we need to show launch Icon. By default, it will be visible.
Defaulttrue
target '_blank' | '_self'
specifies where the link should open. The default behavior is _self, which means that the URL will be loaded into the same browsing context as the current one. If the target is _blank (opening a new window) rel='noopener' will be added to the anchor tag to prevent any potential reverse tabnabbing attack.
Default'_self'

Usage Insights#

Hyperlink

Project Name	Paragon Version	Instance Count
edx-platform	2.6.4	2
frontend-app-account	22.10.0	10
frontend-app-admin-portal	21.13.1	51
frontend-app-authn	22.11.2	23
frontend-app-communications	22.7.0	1
frontend-app-course-authoring	22.8.1	54
learning_assistant	22.8.1	2
live	22.8.1	2
ora_settings	22.8.1	1
proctoring	22.8.1	1
xpert_unit_summary	22.8.1	2
frontend-app-discussions	22.7.0	3
frontend-app-ecommerce	20.46.3	3
frontend-app-enterprise-public-catalog	21.13.1	2
frontend-app-gradebook	22.8.1	2
frontend-app-learner-dashboard	22.9.0	6
frontend-app-learner-portal-enterprise	21.13.1	27
frontend-app-learner-record	22.10.0	9
frontend-app-learning	22.10.0	27
frontend-app-ora-grading	21.11.3	5
frontend-app-payment	22.9.0	8
frontend-app-profile	22.10.0	2
frontend-app-publisher	21.13.1	6
frontend-app-support-tools	21.13.1	17
frontend-component-header-edx	21.13.1	2
frontend-lib-special-exams	22.7.0	5
prospectus	20.46.2	5
studio-frontend	3.4.8	4

Edit this page Leave feedback

Paragon Design System

Hyperlink

minimal usage

with blank target

blank target without Icon

with onClick

with icon

color variants

link variants

with custom link element (e.g., using a router)

Theme Variables#

Props API#

Usage Insights#

Hyperlink

All components (A-Z)

Hyperlink

minimal usage#

with blank target#

blank target without Icon#

with onClick#

with icon#

color variants#

link variants#

with custom link element (e.g., using a router)#

Theme Variables#

Props API#

Usage Insights#

Hyperlink

All components (A-Z)

minimal usage

with blank target

blank target without Icon

with onClick

with icon

color variants

link variants

with custom link element (e.g., using a router)