import { Link } from "@opengovsg/oui"<Link href="/page">Navigate to page</Link>The Link component is built on top of React Aria's Link. It supports navigation via the href prop, or custom press handling via the onPress prop.
To ensure the Link component uses your framework's client-side router (instead of full page navigations), you need to set up the
RouterProviderfromreact-aria-components. See the Next.js or Vite setup guides, or refer to the React Aria frameworks guide for other frameworks.
Use the color prop to change the color of the link.
When adding multiple children (such as using an icon to the Link text) to the Link component, you might encounter some layout issues when using block level elements like div or svg. All children of the Link component automatically have the inline styles applied to them, but sizing and alignment of the start/endContent should still be handled by you manually.
This is a paragraph with an inline icon link: External link, and this should flow naturally, since all children of Link are inline by default. Sizing and alignment of the start/endContent should be handled by you manually.
Continue, which is a link with an icon at the end. Check out the code to see the custom styles on the icons.
You can use the ::before and ::after pseudo elements to add additional content to the Link, such as an external link icon.
Use the isDisabled prop to disable the link.
Links with an href will be handled by the browser, or via a client side router. Links without an href will be rendered as a <span role="link"> instead of an <a>. Use the onPress event to handle user interaction.