Thumbprint logo

Link

Color and style variations for anchor links

Link styles

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

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

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: '#ffffff'
  }}
>
  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.
<Link
  iconLeft={<l />}
  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.
<Link
  iconRight={<l />}
  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: '#ffffff'
  }}
>
  <Link
    accessibilityLabel="Share this page"
    iconLeft={<l />}
    theme="inherit"
    to="https://example.com/"
  />
</div>

Changing the font size
Links inherit the font size of their container.
<div
  style={{
    fontSize: '14px'
  }}
>
  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{' '}
  <span className="b">
    <Link to="https://www.facebook.com/Thumbtack/">
      Thumbtack on Facebook
    </Link>
  </span>
  .
</>

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{' '}
  <Link
    shouldOpenInNewTab
    to="https://www.facebook.com/Thumbtack/"
  >
    Thumbtack on Facebook
  </Link>
  .
</>

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>

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

Full width
<ThemedLink
  to="https://example.com/"
  width="full"
>
  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
  to="https://example.com/"
  width="full-below-small"
>
  Send Quote
</ThemedLink>

Icon left within the ThemedLink
<ThemedLink
  icon={<l />}
  to="https://example.com/"
>
  Send Message
</ThemedLink>

Icon right within the ThemedLink
<ThemedLink
  iconRight={<l />}
  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
    Note: 
    Opens the URL in a new tab when clicked.
    

    Type
    boolean
    Default
    false
  • theme
    Sets the anchor’s text color.
    

    inherit will make the anchor inherit color from its parent.
    

    Type
    '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
    'primary' | 'secondary' | 'tertiary' | 'caution' | 'solid'
    Default
    'primary'
  • size
    Changes the button's line-height, padding, border-radius, and font-size.
    

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