Waffles - Link

Usage guidance

A Link is a visually distinct piece of text primarily used for navigation e.g. taking users to another page. They usually appear within or directly following a sentence. For standalone navigation actions use plain Button instead.

By default Link inherits its font size and weight from the surrounding text. On rare occasions, when a Link is used as standalone action, and not a part of a bigger text body, always set its size.

Third-party navigation components, such as react-router Link, can be passed via the as prop.

Best practices

Examples

Basic usage

With DataCamp you can gain the career-building Python skills you need to succeed as a data scientist. In this track, you'll learn how this versatile language allows you to import, clean, manipulate, and visualize data. Through interactive exercises, you'll get hands-on with some of the most popular Python libraries.

With Icons

Sizes

Large Size Medium Size Small Size

Playground

import { Link } from '@datacamp/waffles/link';
import { Paragraph } from '@datacamp/waffles/paragraph';
import { ExternalLink } from '@datacamp/waffles/icon';

function Playground() {
  return (
    <Paragraph variant="primary" size="medium">
      Through hands-on exercises, with{' '}
      <Link href="https://www.datacamp.com/">DataCamp</Link> you’ll learn how to
      understand data, whether it’s a bar plot on the news or as a statistic
      shared during a work meeting.
    </Paragraph>
  );
}

import { Link } from '@datacamp/waffles/link';
import { Paragraph } from '@datacamp/waffles/paragraph';
import { ExternalLink } from '@datacamp/waffles/icon';

function Playground() {
  return (
    <Paragraph variant="primary" size="medium">
      Through hands-on exercises, with{' '}
      <Link href="https://www.datacamp.com/">DataCamp</Link> you’ll learn how to
      understand data, whether it’s a bar plot on the news or as a statistic
      shared during a work meeting.
    </Paragraph>
  );
}

Live

Props

Link

In addition to the props listed below, Link accepts all props from React.HTMLAttributes<HTMLAnchorElement>, such as: href and data- attributes.

Name	Type	Description
`as`	`React.ElementType`	The element used to render this component, e.g. `a` or react router `Link`.
`children`Required	`React.ReactNode`	The content of the Link.
`iconLeft`	`JSX.Element`	An icon displayed to the left. Could be any Icon from Waffles or a custom component.
`iconRight`	`JSX.Element`	An icon displayed to the right. Could be any Icon from Waffles or a custom component.
`inverted`	`boolean`	Sets the style of the Link suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`size`	`inheritlargemediumsmall`	Defines the font size of the Link. In general should be specified only when used as a standalone element. Default: `inherit`

Imports

You can import the following components, utilities or types from this module:

import { Link } from '@datacamp/waffles/link';
import type { LinkProps } from '@datacamp/waffles/link';