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>

Props API#

Hyperlink Props API

destination string Required
specifies the URL
children node Required
Content of the hyperlink
className string
Custom class names for the hyperlink
target string
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'
onClick func
specifies the callback function when the link is clicked
Default() => {}
externalLinkAlternativeText isRequiredIf( PropTypes.string, props => props.target === '_blank', )
specifies the text for links with a _blank target (which loads the URL in a new browsing context).
Default'in a new tab'
externalLinkTitle isRequiredIf( PropTypes.string, props => props.target === '_blank', )
specifies the title for links with a _blank target (which loads the URL in a new browsing context).
Default'Opens in a new tab'
variant enum'default' | 'muted' | 'brand'
type of hyperlink
Default'default'
isInline bool
specify the link style. By default it will be underlined.
Defaultfalse
showLaunchIcon bool
specify if we need to show launch Icon. By default it will be visible.
Defaulttrue

Usage Insights#

Hyperlink

Project Name	Paragon Version	Instance Count
edx-platform	2.6.4	2
frontend-app-account	20.44.0	12
frontend-app-admin-portal	20.39.2	20
frontend-app-authn	20.40.2	19
frontend-app-communications	20.34.0	1
frontend-app-course-authoring	20.35.1	8
frontend-app-discussions	20.15.0	3
frontend-app-ecommerce	20.35.0	3
frontend-app-enterprise-public-catalog	20.29.0	2
frontend-app-gradebook	19.25.4	2
frontend-app-learner-dashboard	20.32.0	9
frontend-app-learner-portal-enterprise	20.36.0	22
frontend-app-learner-record	20.32.0	6
frontend-app-learning	20.28.4	25
frontend-app-library-authoring	20.44.0	1
frontend-app-ora-grading	20.30.0	5
frontend-app-payment	20.30.1	8
frontend-app-profile	20.44.0	4
frontend-app-publisher	20.28.5	4
frontend-app-support-tools	20.26.0	9
frontend-lib-content-components	20.32.0	9
frontend-lib-special-exams	20.29.0	4
prospectus	20.32.3	3
studio-frontend	3.4.8	4

Leave feedback

Paragon Design System

Theme

Hyperlink

minimal usage

with blank target

blank target without Icon

with onClick

with icon

color variants

link variants

Props API#

Usage Insights#

Hyperlink

All components (A-Z)

Theme

Hyperlink

minimal usage#

with blank target#

blank target without Icon#

with onClick#

with icon#

color variants#

link variants#

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