Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.Visit playground
npm_versionnpm Paragon package page

Hyperlink

minimal usage

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

with blank target

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

blank target without Icon

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

with onClick

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

with icon

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

color variants

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

link variants

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

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

Contents

All components (A-Z)