Components

Link(React)

Color and style variations for anchor links.

Version:14.18.2 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.

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

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