Components

Link(React)

Color and style variations for anchor links.

Version:	`14.16.0` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Link, ThemedLink } from '@thumbtack/thumbprint-react';`

Link styles

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>

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

Secondary links

<Link theme="secondary" to="https://www.thumbtack.com/privacy/">
    Privacy Policy
</Link>

<Link theme="secondary" to="https://www.thumbtack.com/privacy/">
    Privacy Policy
</Link>

Tertiary links

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>

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

Link with an icon to the left

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

Call this Pro

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

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

Link with an icon to the right

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

Call this Pro

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

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

Link with an icon that inherits color of parent

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

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

<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>

<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>

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

Opening links in new tabs

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>

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

Themed links

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="tertiary" to="https://example.com/">
        Tertiary
    </ThemedLink>
    <ThemedLink theme="caution" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

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

Use on dark backgrounds

The solid theme works well on dark backgrounds.

Solid

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

<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="tertiary" size="small" to="https://example.com/">
        Tertiary
    </ThemedLink>
    <ThemedLink theme="caution" size="small" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

<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="tertiary" size="small" to="https://example.com/">
        Tertiary
    </ThemedLink>
    <ThemedLink theme="caution" size="small" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

Disabled themed links

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="tertiary" to="https://example.com/">
        Tertiary
    </ThemedLink>
    <ThemedLink isDisabled theme="caution" to="https://example.com/">
        Caution
    </ThemedLink>
</ButtonRow>

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

Full width

Send Quote

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

<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.

Send Quote

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

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

Icon left within the ThemedLink

Send Message

<ThemedLink icon={<ContentModifierMessageSmall />} to="https://example.com/">
    Send Message
</ThemedLink>

<ThemedLink icon={<ContentModifierMessageSmall />} to="https://example.com/">
    Send Message
</ThemedLink>

Icon right within the ThemedLink

Send Message

<ThemedLink iconRight={<ContentModifierMessageSmall />} to="https://example.com/">
    Send Message
</ThemedLink>

<ThemedLink iconRight={<ContentModifierMessageSmall />} to="https://example.com/">
    Send Message
</ThemedLink>

Props

Link

Anchor link that renders as text.

children
Contents displayed within the anchor.
Type
React.ReactNode
accessibilityLabel
Description of the link’s content. It is required if the link contains an icon and no descriptive text.
Type
string
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
boolean
Default
false
to
Page to navigate to when the anchor is clicked.
Type
string
onClick
Function to fire when clicking on the anchor. This should be used alongside the to prop.
Type
() => void
onMouseEnter
Function that runs when the user hovers on the link.
Type
() => void
onMouseOver
Function that runs when the user hovers on the link. Unlike onMouseEnter, onMouseOver fires each time a child element receives focus.
Type
() => void
onFocus
Function that runs when the link receives focus.
Type
() => void
onMouseLeave
Function that runs when the user hovers away from the link.
Type
() => void
onBlur
Function that runs when the link loses focus.
Type
() => void
rel
The anchor rel attribute. Setting this value will add to any default values provided by Thumbprint for the rel attribute.
Type
string
iconLeft
Icon from Thumbprint Icons to render left of the text within Link.
Type
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right of the text within Link.
Type
React.ReactNode
target
The anchor target attribute. Set this to _blank to open in a new tab, or to an arbitrary string to open the link in an <iframe> with the same name.
Type
string
shouldOpenInNewTab
deprecated
Type
boolean
Default
false
theme
Sets the anchor’s text color.
inherit will make the anchor inherit color from its parent.
Type
This prop can be one of the following 4 types:
'primary'
'secondary'
'tertiary'
'inherit'
Default
'primary'
dataTestId
A selector hook into the React component for use in automated testing environments.
Type
string
dataTest
deprecated
A selector hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
Type
string
title
Adds the title attribute to the anchor. This should be used infrequently since it’s better to use descriptive text in children.
Type
string

ThemedLink

Anchor link that visually looks like a button.

children
Contents displayed within the button.
Type
React.ReactNode
accessibilityLabel
Description of the link’s content. It is required if the link contains an icon and no descriptive text.
Type
string
isDisabled
Visually and functionally disables the button.
Type
boolean
Default
false
to
Page to navigate to when the anchor is clicked.
Type
string
onClick
Function to fire when clicking on the anchor. This should be used alongside the to prop.
Type
() => void
onMouseEnter
Function that runs when the user hovers on the link.
Type
() => void
onMouseOver
Function that runs when the user hovers on the link. Unlike onMouseEnter, onMouseOver fires each time a child element receives focus.
Type
() => void
onFocus
Function that runs when the link receives focus.
Type
() => void
onMouseLeave
Function that runs when the user hovers away from the link.
Type
() => void
onBlur
Function that runs when the link loses focus.
Type
() => void
rel
The anchor rel attribute. Setting this value will add to any default values provided by Thumbprint for the rel attribute.
Type
string
target
The anchor target attribute. Set this to _blank to open in a new tab, or to an arbitrary string to open the link in an <iframe> with the same name.
Type
string
shouldOpenInNewTab
Opens the URL in a new tab when clicked.
Type
boolean
Default
false
icon
Icon from Thumbprint Icons to render left within the button. It must be one of the small icons.
Type
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right within the button. It must be one of the small icons.
Type
React.ReactNode
theme
Controls the button’s background, text, and border theme.
Type
This prop can be one of the following 5 types:
'primary'
'secondary'
'tertiary'
'caution'
'solid'
Default
'primary'
size
Changes the button’s line-height, padding, border-radius, and font-size.
Type
This prop can be one of the following 2 types:
'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
This prop can be one of the following 3 types:
'auto'
'full'
'full-below-small'
Default
'auto'
dataTestId
A selector hook into the React component for use in automated testing environments.
Type
string
dataTest
deprecated
A selector hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
Type
string
title
Adds the title attribute to the anchor. This should be used infrequently since it’s better to use descriptive text in children.
Type
string