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

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)