Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Hyperlink

minimal usage

with blank target

blank target without Icon

with onClick

with icon

color variants

link variants

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

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)