| Name | Description | Default | Type |
|---|---|---|---|
children* | Text or content for the Link. | | ReactNode |
href* | URL or DOM id to navigate to. | | string |
className | Additional CSS classes. | | string |
icon | Set the Icon prop to | false | boolean |
onPreview | | (e: { href: string;}) => void | |
previewable | Determines if the Link should render a popover when focused or hovered over. | | boolean |
ref | Ref for the wrapping element. | | Ref<HTMLAnchorElement> |
target | Specifies where to open the link href. | | string |
variant | Controls the styling of the Link. | "link" | 'link' |'text' |'primary' |'secondary' |'simple' |
Link
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Links move users to a new URL or to a new position on the current page that is determined by the href prop. Links should not be used as Buttons with the intent of submitting data or performing some action other than navigation.
Variants
The Link component offers all of the same variants as the Button component, except they will always be rendered as an <a/> tag.
Example
External links
By default, Links will navigate to the given href within the current window. To open a Link in a new tab, pass _blank to the target prop. Links that have a target set to _blank will render with an open Icon to indicate to the user that they are about to navigate to another browser tab.
Previewable links
If a Link is set as previewable, a Popover will render when the Link is focused or hovered. The Popover will allow for the Link to be previewed via an onPreview callback function, or opened in a new tab.