Link
Links allow user to navigate to another in-app page or external URLs.
Example
Usage
Internal links
When navigating to a page in an application powered by React Router, Link component from React Router is used instead of <a> tag to avoid a full page reload.
Note that you still set path via a href prop, not to, as you would when using React Router's Link component directly.
External links
When an absolute URL is provided, it's treated as an external link. External links open in a new tab.
Upsell
When using a link within the context of an Upsell, use variant="upsell" to update the theming appropriately.
Guidelines
When to use
- When navigating to a different page within the app that doesn't require user input.
- When navigating to an external URL.
When not to use
- If navigating to a different page that requires user input, use a button instead.
- If clicking a link performs an action while staying on the same page.
Content
- Use sentence case.
Props
| Name | Default | Description |
|---|---|---|
href | — | stringLink URL. |
children | — | ReactNodeLink text. |
as | — | ElementTypeElement type to render as. |
isExternal | — | booleanIf true, the link will open in new tab |
variant | "primary" | "primary" | "upsell"Variant of the link. |