furl
Getting startedDesignComponents
Design
Design GuidelinesTypography SystemLayout SystemColor palettesCustomization
Components
ComponentsAccordionAlertAnchorAudioAvatarBadgeBreadcrumbsButtonButtonGroupCalendarCardCollapseContextButtonDividerDropdownFooterFormGraphGridHyperlinkIconIframeImageInputItemLayoutListLoaderMediaObjectMenuModalNotificationPaginationPopoverProgressSearchStepsSwitchTableTabsTooltipTypographyVideo

Hyperlink

Hyperlinks allow users to navigate to different URLs, both internal and external.

Examples

Opens in same tab.

Opens in new tab.

Opens in new tab with noopener noreferrer.

import React from 'react';
import ReactDOM from 'react-dom';
import { Paragraph, Hyperlink } from 'furl-components';

ReactDOM.render(
  <Paragraph>
    <Hyperlink href='https://google.com'>Opens in same tab.</Hyperlink>
    <Hyperlink href='https://google.com' openIn='_blank'>Opens in new tab.</Hyperlink>
    <Hyperlink href='https://google.com' openIn='external'>Opens in new tab with noopener noreferrer.</Hyperlink>
  </Paragraph>, 
  document.getElementById('root')
);

API

Anchor props
Property Description Type Default
href hyperlink url string
openIn target of the hyperlink> string 'self'

Notes

  • openIn accepts the following values: ‘self’, ‘blank’, ‘external’.

furl was designed and developed by Angelos Chalaris © 2019
Documentation generated using Gatsby, hosting by Netlify