Skip to main content

Link

Link in Storybook

Examples​

Check out the Usage section for details about how and when to use the Link component.

This example shows the difference between the to prop and the href prop. You use to to specify a target URL within the application, and href to navigate to both internal and external URLs. When you add the disabled property, the links are not clickable.

Using the icon property you can set a custom icon for the link.

import React from 'react';
import { Link } from '@jutro/router/';

export const BasicLink = () => {
      
  return (
    <div>
        This is an <Link to="/link#examples" icon="gw-bathtub">internal link</Link>.
        This is an <Link target="_blank" href="https://docs.guidewire.com/">external link</Link>.
        This is a <Link disabled>disabled link</Link>.
    </div>
  );
};

The Link component can handle events using the onClick property when the user clicks on the link, or using onKeyPress when the user presses a key when the focus is on the link.

import React, { useState } from 'react';
import { Link } from '@jutro/router/';

export const EventsLink = () => {
  const [linkText, setLinkText] = useState("Click me!");
  const handleClick = () => {
    setLinkText("Clicked");
  }; 
  const handlePress = () => {
    setLinkText("Pressed");
  };      
  return (
    <Link
        onClick={handleClick}
        onKeyPress={handlePress}
    >
        {linkText}
    </Link>
  );
};

You can place any element within a link to have it displayed, as in this example, where a link contains a strong element. However, adding certain elements such as an input field or a link inside a link might affect accessibility.

import React from 'react';
import { Link } from '@jutro/router/';

export const ChildrenLink = () => {
      
  return (
    <div>
        <Link>
            <strong>This is a child element.</strong>
        </Link>
    </div>
  );
};