Link

Ready

Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or following the content.

Code

Usage

Specifications

Props

Name	Default	Description
disabled: boolean	`false`	If true, the link is disabled.
inheritColor: boolean	`false`	If true, the color is inherited from parent.
icon: node \| string		Element or path used as the icon that will be placed next to the link text.
iconPosition: 'before' \| 'after'	`'before'`	Indicates the position of the icon in the component.
href: string		Page to be opened when the user clicks on the link.
newWindow: boolean	`false`	If true, the page is opened in a new browser tab.
onClick: function		If defined, the link will be displayed as a button. This function will be called when the user clicks the link.
children: string		Content of the link.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number	`0`	Value of the tabindex.

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      This is a text with a <DxcLink href="#">Link</DxcLink> to another page.
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      This is a text with a <DxcLink href="#">Link</DxcLink> to another page.
    </DxcInset>
  );
}

Router links

There are many React based routers, unfortunately all with different APIs.

So we decided to make our link component just an styled HTML anchor element which allows it to be used in any React based router. For each API is different so here are some examples for React Router and NextJS Link. Some of these examples are just representations of how they should be implemented but might not work correctly in this scenario.

React router

This is an example of React Router using the prop component. Note that this Prop is not available in v6.

() => {
  return (
    <DxcInset space="2rem">
      This is a text with a 
      <RouterLink to="/components/link" component={DxcLink}>React Router v5</RouterLink>
      {" "}link.
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      This is a text with a 
      <RouterLink to="/components/link" component={DxcLink}>React Router v5</RouterLink>
      {" "}link.
    </DxcInset>
  );
}

React router v6

In React Router v6 the prop component is no longer available so it is necessary to use hooks provided by React Router v6.

() => {
  const CustomLink = React.forwardRef(
    ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
      let href = useHref(to);
      let handleClick = () => (useLinkClickHandler(to, {
        replace,
        state,
        target,
      }));

      return (
        <DxcLink
          {...rest}
          href={href}
          onClick={(event) => {
            handleClick(event);
          }}
          ref={ref}
          target={target}
        />
      );
    }
  );
  return (
    <DxcInset space="2rem">
      This is a text with a
      <CustomLink to="/components/link" component={DxcLink}>
        React Router v6
      </CustomLink>{" "}
      link.
    </DxcInset>
  );
}

() => {
  const CustomLink = React.forwardRef(
    ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
      let href = useHref(to);
      let handleClick = () => (useLinkClickHandler(to, {
        replace,
        state,
        target,
      }));

      return (
        <DxcLink
          {...rest}
          href={href}
          onClick={(event) => {
            handleClick(event);
          }}
          ref={ref}
          target={target}
        />
      );
    }
  );
  return (
    <DxcInset space="2rem">
      This is a text with a
      <CustomLink to="/components/link" component={DxcLink}>
        React Router v6
      </CustomLink>{" "}
      link.
    </DxcInset>
  );
}

NextJS Link

This is an example of NextJS .

() => {
  const CustomLink = React.forwardRef(({ onClick, href, children, ...other }, ref) => {
    return (
      <DxcLink {...other} href={href} onClick={onClick} ref={ref}>
        {children}
      </DxcLink>
    );
  });
  return (
    <DxcInset space="2rem">
      This is a text with a
      <Link href="/components/link" passHref>
        <CustomLink> next link</CustomLink>
      </Link>{" "}
      link.
    </DxcInset>
  );
}

() => {
  const CustomLink = React.forwardRef(({ onClick, href, children, ...other }, ref) => {
    return (
      <DxcLink {...other} href={href} onClick={onClick} ref={ref}>
        {children}
      </DxcLink>
    );
  });
  return (
    <DxcInset space="2rem">
      This is a text with a
      <Link href="/components/link" passHref>
        <CustomLink> next link</CustomLink>
      </Link>{" "}
      link.
    </DxcInset>
  );
}

Icons

() => {
  const icon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      This is a text with a{" "}
      <DxcLink href="#" icon={icon}>
        Link
      </DxcLink>{" "}
      with icon.
    </DxcInset>
  );
}

() => {
  const icon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      This is a text with a{" "}
      <DxcLink href="#" icon={icon}>
        Link
      </DxcLink>{" "}
      with icon.
    </DxcInset>
  );
}

Edit this page on GitHub

Inset

NextNav Tabs

Link

Props

Examples

Basic usage

Router links

React router

React router v6

NextJS Link

Icons

Contents