Components

Link(React)

Color and style variations for anchor links.

Version:10.1.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { Link, ThemedLink } from '@thumbtack/thumbprint-react';

The Link component can be used to render plain text links.

Learn more about Thumbtack on Facebook.

These links render as white text with an underline. They work well on dark backgrounds.

Learn more about Thumbtack on Facebook.

The Link component provides a iconLeft prop to help vertically position icons alongside text.

The Link component also allows an icon to the right of the text.

This link inherits the color of its parent with theme="inherit".

Changing the font size

Links inherit the font size of their container.

Learn more about Thumbtack on Facebook.

Changing the font weight

Links also inherit the font weight of their container.

Learn more about Thumbtack on Facebook.

The shouldOpenInNewTab prop will open links in a new tab. It also handles the target="_blank" security vulnerability.

Learn more about Thumbtack on Facebook.

The ThemedLink component renders <a> tags that visually look like buttons.

These are the available ThemedLink styles for use on light background colors.

Why is the secondary theme different?

The former secondary theme is has been renamed to tertiary. Learn more about the changes.

Use on dark backgrounds

The solid theme works well on dark backgrounds.

Size options

The ThemedLink component also has a small variation.

The isDisabled prop visually and functionally disables the link.

Full width

Full width on small screens

This link becomes full width on viewports that are smaller than our small breakpoint. The width is auto on larger screens.

Props

Anchor link that renders as text.

  • children

    Contents displayed within the anchor.

    Type
    node
    Default
    undefined
  • accessibilityLabel

    Description of the link’s content. It is required if the link contains an icon and no descriptive text.

    Type
    string
    Default
    undefined
  • isDisabled

    Functionally disables the anchor. We discourage the use of this prop since it is difficult to visually indicate that a link is disabled. Consider not rendering the link if it is not interactive.

    Type
    bool
    Default
    false
  • to

    Page to navigate to when the anchor is clicked.

    Type
    string
    Default
    null
  • onClick

    Function to fire when clicking on the anchor. This should be used alongside the to prop.

    Type
    func
    Default
    undefined
  • iconLeft

    Icon from Thumbprint Icons to render left of the text within Link.

    Type
    node
    Default
    null
  • iconRight

    Icon from Thumbprint Icons to render right of the text within Link.

    Type
    node
    Default
    null
  • shouldOpenInNewTab

    Opens the URL in a new tab when clicked.

    Type
    bool
    Default
    false
  • theme

    Sets the anchor’s text color.

    inherit will make the anchor inherit color from its parent.

    Type
    oneOf([
      'primary',
      'secondary',
      'tertiary',
      'inherit',
    ])
    Default
    'primary'
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined

Anchor link that visually looks like a button.

  • children

    Contents displayed within the button.

    Type
    node
    Default
    undefined
  • accessibilityLabel

    Description of the link’s content. It is required if the link contains an icon and no descriptive text.

    Type
    string
    Default
    undefined
  • isDisabled

    Visually and functionally disables the button.

    Type
    bool
    Default
    false
  • to

    Page to navigate to when the anchor is clicked.

    Type
    string
    Default
    null
  • onClick

    Function to fire when clicking on the anchor. This should be used alongside the to prop.

    Type
    func
    Default
    undefined
  • shouldOpenInNewTab

    Opens the URL in a new tab when clicked.

    Type
    bool
    Default
    false
  • icon

    Icon from Thumbprint Icons to render within the button. It must be one of the small icons.

    Type
    node
    Default
    null
  • theme

    Controls the button’s background, text, and border theme.

    Type
    oneOf([
      'primary',
      'secondary',
      'tertiary',
      'caution',
      'solid',
    ])
    Default
    'primary'
  • size

    Changes the button’s line-height, padding, border-radius, and font-size.

    Type
    oneOf([
      'small',
      'large',
    ])
    Default
    'large'
  • width

    Themed links are as wide as the content that is passed in. The full option will expand the width to 100% on all screens. full-below-small will expand the width to 100% on devices smaller than our small breakpoint.

    Type
    oneOf([
      'auto',
      'full',
      'full-below-small',
    ])
    Default
    'auto'
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined