Components

Link

Color and style variations for anchor links

Version

Link styles

The LinkV2 component renders plain text links. It inherits the surrounding font size and weight, and underlines on hover.

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

Secondary links

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

Alert links

Reserved for links to destructive actions, or ones that need to read as a warning.

<LinkV2
  theme="alert"
  to="https://www.thumbtack.com/"
>
  Cancel this project
</LinkV2>

Inverse links

These links render as white text, for use on dark backgrounds. This is the v2 replacement for v1's tertiary theme.

<LinkV2
  theme="inverse"
  to="https://www.facebook.com/Thumbtack/"
>
  Thumbtack on Facebook
</LinkV2>

Links within long text

The longtext theme is underlined at rest rather than only on hover, and takes its color from the copy it sits in, so the underline alone is what sets the link apart. Use it for links embedded in running text.

<Text size={2}>
  By continuing, you agree to the{' '}
  <LinkV2
    theme="longtext"
    to="https://www.thumbtack.com/terms/"
  >
    Terms of Use
  </LinkV2>
  {' '}and confirm you have read our{' '}
  <LinkV2
    theme="longtext"
    to="https://www.thumbtack.com/privacy/"
  >
    Privacy Policy
  </LinkV2>
  .
</Text>

Because the color is inherited, the same theme works unchanged on a dark background.

<div className="white">
  By continuing, you agree to the{' '}
  <LinkV2
    theme="longtext"
    to="https://www.thumbtack.com/terms/"
  >
    Terms of Use
  </LinkV2>
  .
</div>

Link with an icon

The iconLeft and iconRight props vertically position an icon alongside the text. A link with an icon lays its contents out in a row, so unlike a plain link it won't wrap across lines.

<ButtonRow>
  <LinkV2
    iconLeft={<ContentActionsPhoneCallSmall />}
    to="https://www.thumbtack.com/"
  >
    Call pro
  </LinkV2>
  <LinkV2
    iconRight={<NavigationArrowRightSmall />}
    to="https://www.thumbtack.com/"
  >
    See all pros
  </LinkV2>
</ButtonRow>

Link with an icon that inherits color of parent

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

<div className="white">
  <LinkV2
    accessibilityLabel="Share this page"
    iconLeft={<ContentActionsShareMedium />}
    theme="inherit"
    to="https://example.com/"
  />
</div>

Disabled links

The isDisabled prop functionally disables the link: it renders without an href and drops out of the tab order. We discourage its use, since a disabled link is hard to indicate visually — prefer not rendering the link when it isn't interactive.

<LinkV2
  isDisabled
  to="https://www.thumbtack.com/"
>
  Unavailable
</LinkV2>

Opening links in new tabs

Setting target="_blank" opens the link in a new tab and adds the rel values needed to keep the new tab from reaching back into this one. Any rel you pass is added to rather than replaced.

<LinkV2
  target="_blank"
  to="https://www.facebook.com/Thumbtack/"
>
  Thumbtack on Facebook
</LinkV2>

Themed links

ThemedLinkV2 renders an anchor that looks like a ButtonV2, for navigation that needs a button's visual weight. Its theme, size, and width props match ButtonV2 exactly.

<ButtonRow>
  <ThemedLinkV2 to="https://www.thumbtack.com/">
    Primary
  </ThemedLinkV2>
  <ThemedLinkV2
    theme="secondary"
    to="https://www.thumbtack.com/"
  >
    Secondary
  </ThemedLinkV2>
  <ThemedLinkV2
    theme="tertiary"
    to="https://www.thumbtack.com/"
  >
    Tertiary
  </ThemedLinkV2>
  <ThemedLinkV2
    theme="alert"
    to="https://www.thumbtack.com/"
  >
    Alert
  </ThemedLinkV2>
  <ThemedLinkV2
    theme="caution"
    to="https://www.thumbtack.com/"
  >
    Caution
  </ThemedLinkV2>
</ButtonRow>

Size options

small is 40px tall and large — the default — is 52px. Each matches the TextInputV2 size of the same name, so the two line up when placed side by side.

<ButtonRow>
  <ThemedLinkV2
    size="small"
    to="https://www.thumbtack.com/"
  >
    Small
  </ThemedLinkV2>
  <ThemedLinkV2
    size="large"
    to="https://www.thumbtack.com/"
  >
    Large
  </ThemedLinkV2>
</ButtonRow>

Disabled themed links

<ThemedLinkV2
  isDisabled
  to="https://www.thumbtack.com/"
>
  Unavailable
</ThemedLinkV2>

Full width

<ThemedLinkV2
  to="https://www.thumbtack.com/"
  width="full"
>
  Send Quote
</ThemedLinkV2>

Full width on small screens

This link becomes full width on viewports smaller than our small breakpoint, and auto on larger screens.

<ThemedLinkV2
  to="https://www.thumbtack.com/"
  width="full-below-small"
>
  Send Quote
</ThemedLinkV2>

Icon within a themed link

As with ButtonV2, the props are icon and iconRight.

<ButtonRow>
  <ThemedLinkV2
    icon={<ContentModifierMessageSmall />}
    to="https://www.thumbtack.com/"
  >
    Send Message
  </ThemedLinkV2>
  <ThemedLinkV2
    iconRight={<NavigationArrowRightSmall />}
    to="https://www.thumbtack.com/"
  >
    Continue
  </ThemedLinkV2>
</ButtonRow>

Props

LinkV2

Anchor link that renders as text.

to
required
Page to navigate to when the anchor is clicked. Required: a LinkV2 always renders an anchor. Use TextButtonV2 for an action that doesn't navigate.

Type
string
children
Contents displayed within the anchor.

Type
React.ReactNode
theme
Sets the anchor's text color. Every theme underlines on hover and keeps its color. longtext and inherit both take their color from the surrounding text; longtext additionally stays underlined at rest, for links embedded in body copy.

Type
'primary' | 'secondary' | 'alert' | 'inverse' | 'longtext' | 'inherit'
Default
'primary'
iconLeft
Icon from Thumbprint Icons to render left of the text within LinkV2.

Type
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right of the text within LinkV2.

Type
React.ReactNode
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
target
The anchor target attribute. Set this to _blank to open in a new tab — which also adds the rel values that keep the new tab from reaching back into this one — or to an arbitrary string to open the link in an <iframe> with the same name.

Type
string
rel
The anchor rel attribute. Setting this value will add to any default values provided by Thumbprint for the rel attribute.

Type
string
accessibilityLabel
Description of the link's content. It is required if the link contains an icon and no descriptive text. Rendered as aria-label.

Type
string
onClick
Function that runs when the link is activated by mouse, touch, or keyboard. Pointer activation passes the real DOM MouseEvent, so event.preventDefault() can cancel the navigation. Keyboard activation passes a synthetic event, fired after the browser has already begun navigating, so it cannot be canceled. Not called while the link is disabled.

Type
(event: React.MouseEvent<HTMLElement>) => void
onMouseEnter
Function that runs when the user hovers on the link.

Type
(event: React.MouseEvent<HTMLElement>) => void
onMouseOver
Function that runs when the user hovers on the link. Unlike onMouseEnter, onMouseOver also fires as the pointer moves over descendant elements.

Type
(event: React.MouseEvent<HTMLElement>) => void
onMouseLeave
Function that runs when the user hovers away from the link.

Type
(event: React.MouseEvent<HTMLElement>) => void
onFocus
Function that runs when the link receives focus.

Type
(event: React.FocusEvent<HTMLElement>) => void
onBlur
Function that runs when the link loses focus.

Type
(event: React.FocusEvent<HTMLElement>) => void
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
ref
A ref forwarded to the underlying anchor element.

Type
React.Ref<HTMLAnchorElement>

ThemedLinkV2

Anchor link that visually looks like a button.

to
required
Page to navigate to when the anchor is clicked. Required: a ThemedLinkV2 always renders an anchor. Use ButtonV2 for an action that doesn't navigate.

Type
string
children
Contents displayed within the button.

Type
React.ReactNode
theme
Controls the button's background, text, and border color. Matches ButtonV2.

Type
'primary' | 'secondary' | 'tertiary' | 'alert' | 'caution'
Default
'primary'
size
Changes the button's height, padding, and font size: small is 40px tall and large 52px. Each matches the TextInputV2 size of the same name, so the two line up when paired.

Type
'small' | 'large'
Default
'large'
width
ThemedLinkV2 components 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 the small breakpoint.

Ignored within an InputRow, where the link always fills its cell so the row's widthRatios govern the layout.

Type
'auto' | 'full' | 'full-below-small'
Default
'auto'
icon
Icon from Thumbprint Icons to render left within the button.

Type
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right within the button.

Type
React.ReactNode
isDisabled
Visually and functionally disables the button.

Type
boolean
Default
false
target
The anchor target attribute. Set this to _blank to open in a new tab — which also adds the rel values that keep the new tab from reaching back into this one — or to an arbitrary string to open the link in an <iframe> with the same name.

Type
string
rel
The anchor rel attribute. Setting this value will add to any default values provided by Thumbprint for the rel attribute.

Type
string
accessibilityLabel
Description of the link's content. It is required if the link contains an icon and no descriptive text. Rendered as aria-label.

Type
string
onClick
Function that runs when the link is activated by mouse, touch, or keyboard. Pointer activation passes the real DOM MouseEvent, so event.preventDefault() can cancel the navigation. Keyboard activation passes a synthetic event, fired after the browser has already begun navigating, so it cannot be canceled. Not called while the link is disabled.

Type
(event: React.MouseEvent<HTMLElement>) => void
onMouseEnter
Function that runs when the user hovers on the link.

Type
(event: React.MouseEvent<HTMLElement>) => void
onMouseOver
Function that runs when the user hovers on the link. Unlike onMouseEnter, onMouseOver also fires as the pointer moves over descendant elements.

Type
(event: React.MouseEvent<HTMLElement>) => void
onMouseLeave
Function that runs when the user hovers away from the link.

Type
(event: React.MouseEvent<HTMLElement>) => void
onFocus
Function that runs when the link receives focus.

Type
(event: React.FocusEvent<HTMLElement>) => void
onBlur
Function that runs when the link loses focus.

Type
(event: React.FocusEvent<HTMLElement>) => void
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
ref
A ref forwarded to the underlying anchor element.

Type
React.Ref<HTMLAnchorElement>