Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Hyperlink

minimal usage

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

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

  edX.org

</Hyperlink>

with blank target

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

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

  edX.org

</Hyperlink>

blank target without Icon

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>

with onClick

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>

with icon

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

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

  <Icon

    id="SampleIcon"

    className="fa fa-book"

    screenReaderText="Visit edX Home"

  />

</Hyperlink>

color variants

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>

link variants

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>

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 NameParagon VersionInstance Count
edx-platform2.6.42
frontend-app-account20.36.012
frontend-app-admin-portal20.26.321
frontend-app-authn20.36.219
frontend-app-communications20.30.11
frontend-app-course-authoring20.32.08
frontend-app-discussions20.15.03
frontend-app-ecommerce20.35.03
frontend-app-enterprise-public-catalog20.29.02
frontend-app-gradebook19.25.42
frontend-app-learner-dashboard20.32.07
frontend-app-learner-portal-enterprise20.36.021
frontend-app-learner-record20.32.06
frontend-app-learning20.28.425
frontend-app-library-authoring20.30.11
frontend-app-ora-grading20.30.05
frontend-app-payment20.30.17
frontend-app-profile20.32.03
frontend-app-publisher20.28.54
frontend-app-support-tools20.26.08
frontend-lib-content-components20.34.09
frontend-lib-special-exams20.22.44
prospectus20.32.32
studio-frontend3.4.84
Leave feedback

Contents

All components (A-Z)