Components

Link(React)

Color and style variations for anchor links.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
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.
<React.Fragment>
    Learn more about <Link to="https://www.facebook.com/Thumbtack/">Thumbtack on Facebook</Link>.
</React.Fragment>
<Link theme="secondary" to="https://www.thumbtack.com/privacy/">
    Privacy Policy
</Link>

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

Learn more about Thumbtack on Facebook.
<div style={{ color: tokens.tpColorWhite }}>
    Learn more about
    <Link theme="tertiary" to="https://www.facebook.com/Thumbtack/">
        Thumbtack on Facebook
    </Link>.
</div>

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

<Link iconLeft={<ContentActionsPhoneCallSmall />} to="https://example.com/">
    Call this Pro
</Link>

This link inherits the color of its parent with theme=&quot;inherit&quot;.

<div style={{ color: tokens.tpColorWhite }}>
    <Link
        iconLeft={<ContentActionsShareMedium />}
        accessibilityLabel="Share this page"
        theme="inherit"
        to="https://example.com/"
    />
</div>

Changing the font size

Links inherit the font size of their container.

Learn more about Thumbtack on Facebook.
<div style={{ fontSize: tokens.tpFontBody2Size }}>
    Learn more about <Link to="https://www.facebook.com/Thumbtack/">Thumbtack on Facebook</Link>.
</div>

Changing the font weight

Links also inherit the font weight of their container.

Learn more about Thumbtack on Facebook.
<React.Fragment>
    Learn more about{' '}
    <span className="b">
        <Link to="https://www.facebook.com/Thumbtack/">Thumbtack on Facebook</Link>
    </span>
    .
</React.Fragment>

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

Learn more about Thumbtack on Facebook.
<React.Fragment>
    Learn more about{' '}
    <Link to="https://www.facebook.com/Thumbtack/" shouldOpenInNewTab>
        Thumbtack on Facebook
    </Link>
    .
</React.Fragment>

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

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

<ButtonRow>
    <ThemedLink theme="primary" to="https://example.com/">
        Primary
    </ThemedLink>
    <ThemedLink theme="secondary" to="https://example.com/">
        Secondary
    </ThemedLink>
    <ThemedLink theme="caution" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

Use on dark backgrounds

The solid theme works well on dark backgrounds.

<ThemedLink theme="solid" to="https://example.com/">
    Solid
</ThemedLink>

Size options

The ThemedLink component also has a small variation.

<ButtonRow>
    <ThemedLink theme="primary" size="small" to="https://example.com/">
        Primary
    </ThemedLink>
    <ThemedLink theme="secondary" size="small" to="https://example.com/">
        Secondary
    </ThemedLink>
    <ThemedLink theme="caution" size="small" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

The isDisabled prop visually and functionally disables the link.

<ButtonRow>
    <ThemedLink isDisabled theme="primary" to="https://example.com/">
        Primary
    </ThemedLink>
    <ThemedLink isDisabled theme="secondary" to="https://example.com/">
        Secondary
    </ThemedLink>
    <ThemedLink isDisabled theme="caution" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

Full width

<ThemedLink width="full" to="https://example.com/">
    Send Quote
</ThemedLink>

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.

<ThemedLink width="full-below-small" to="https://example.com/">
    Send Quote
</ThemedLink>
<ThemedLink icon={<ContentModifierMessageSmall />} to="https://example.com/">
    Send Message
</ThemedLink>

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
  • 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',
      '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