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	23.14.8	10
frontend-app-admin-portal	22.20.3	64
frontend-app-authn	23.14.0	7
frontend-app-authn	23.14.0	23
frontend-app-course-authoring	23.14.0	14
frontend-app-authn	23.16.0	16
frontend-app-communications	23.14.2	1
frontend-app-course-authoring	23.16.0	2
learning_assistant	23.16.0	2
live	23.16.0	2
ora_settings	23.16.0	1
xpert_unit_summary	23.16.0	2
frontend-app-discussions	23.14.2	3
frontend-app-ecommerce	20.46.3	3
frontend-app-enterprise-public-catalog	22.20.5	2
frontend-app-gradebook	23.4.5	1
frontend-app-discussions	23.16.0	5
frontend-app-learner-portal-enterprise	22.17.0	3
frontend-app-learner-record	23.16.0	9
frontend-app-learning	23.4.5	27
frontend-app-gradebook	23.4.5	1
frontend-app-library-authoring	21.11.3	2
frontend-app-learner-record	23.4.5	4
frontend-app-payment	22.9.0	8
frontend-app-profile	23.16.0	3
frontend-app-publisher	23.14.8	4
frontend-app-support-tools	23.4.2	18
frontend-lib-special-exams	23.4.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)