Link | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The Link component renders a clickable hyperlink. Use links to direct users to a web page, another part of the HubSpot app, or use them as buttons.

design-guidelines-link

  1. Link text: text that describes where the link leads.
  2. External link icon: indicates that the link will lead to a page outside of the HubSpot app.
import { Link } from '@hubspot/ui-extensions'; const Extension = () => { return <Link href="https://app.hubspot.com/">HubSpot</Link>; };
Prop Type Description
href  Required String The URL that will open on click. Links to pages in the HubSpot account will open in the same account, while non-HubSpot links will open in a new tab.
variant 'primary' (default) | 'light' | 'dark' | 'destructive' The color of the link. See the variants section for more information.
onClick () => void A function that is invoked when the link is clicked. The function receives no arguments and its return value is ignored.
preventDefault Boolean When set to true, event.preventDefault() will be invoked before the onClick function is called, preventing automatic navigation to the href URL.

Variants

Using the variant prop, you can set the following styling:

  • primary: the default blue (#0091ae).
    design-guidelines-links_4 
  • light: a white link that turns to a lighter shade of blue on hover (#7fd1de).
    design-guidelines-links_3
  • dark: a darker shade of blue (#33475b).
    design-guidelines-links_2
  • destructive: a red link (#f2545b).
    design-guidelines-links_1

Usage examples

  • Use the default primary variant when you want to link to another page or contact record in HubSpot.
  • Use the light variant when you want to include a link on a dark background.
  • Use the dark variant to include a link in an alert.
  • Use the destructive variant when the link results in an action that can't be undone by the user, such as deleting contact property information.

Guidelines

  • DO: space out links so that users can tell when they'll be navigation to a different place.
  • DO: make link text concise and contextual.
  • DO: use the destructive variant sparingly and only when the action can't be undone.
  • DON'T: crowd multiple links together.
  • DON'T: use the dark variant outside of alerts.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.