PageLink

import { PageLink } from "@hubspot/ui-extensions/pages";

// Basic link to another page
<PageLink to="/docs">Documentation</PageLink>

// Link with parameters
<PageLink to="/contacts" params={{ filter: "active" }}>
  Active Contacts
</PageLink>

import React from "react";
import { Text, Heading } from "@hubspot/ui-extensions";
import { PageLink, PageBreadcrumbs, PageTitle } from "@hubspot/ui-extensions/pages";

const DocsPage = () => {
  return (
    <>
      <PageBreadcrumbs>
        <PageBreadcrumbs.PageLink to="/">Home</PageBreadcrumbs.PageLink>
        <PageBreadcrumbs.Current>Documentation</PageBreadcrumbs.Current>
      </PageBreadcrumbs>
      <PageTitle>Documentation</PageTitle>

      <Heading>Getting Started</Heading>


      <Text>
        Check out our <PageLink to="/support">support page</PageLink> for help.
      </Text>
    </>
  );
};

<PageLink to="/docs">Documentation</PageLink>
<PageLink to="/support">Support</PageLink>
<PageLink to="/analytics">Analytics</PageLink>

// Navigate to /docs?section=getting-started
<PageLink to="/docs" params={{ section: "getting-started" }}>
  Getting Started Guide
</PageLink>

// Navigate to /analytics?view=dashboard&period=30d
<PageLink
  to="/analytics"
  params={{ view: "dashboard", period: "30d" }}
>
  Dashboard (Last 30 Days)
</PageLink>

// Navigate to /view-contact/12345
<PageLink
  to="/view-contact/:contactId"
  params={{ contactId: "12345" }}
>
  View Contact
</PageLink>

// Navigate to /deals/456/notes/789?highlight=comments
<PageLink
  to="/deals/:dealId/notes/:noteId"
  params={{
    dealId: "456",
    noteId: "789",
    highlight: "comments"
  }}
>
  View Note
</PageLink>

import { Link } from "@hubspot/ui-extensions";
import { PageLink } from "@hubspot/ui-extensions/pages";

// Internal navigation - use PageLink
<PageLink to="/docs">Documentation</PageLink>

// External URL - use Link
<Link href="https://www.example.com">External Site</Link>