@thumbtack/tp-ui-react-link v3.1.5

package: '@thumbtack/tp-ui-react-link' kit: element/link.yaml platform: react

url: /api/components/element/link/react/

Link styles

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

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

Tertiary links

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

<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

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>

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

Changing the font size

Links inherit the font size of their container.

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

<React.Fragment>
    Learn more about{' '}
    <strong>
        <Link to="https://www.facebook.com/Thumbtack/">Thumbtack on Facebook</Link>
    </strong>
    .
</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.

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

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

Icon within the ThemedLink

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