Link

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.

For more information on how to use the features and props for this component, check out the developer documentation.

The Link component offers all of the same variants as the Button component, except they will always be rendered as an <a/> tag.

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 will leave the current application should also be paired with the open Icon.

Similar to the Button component, the Link component can be set to render only Icons for content. The icon prop should be supplied in these circumstances so that the styling of the link may be adjusted accordingly.

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.

NameTypeDefaultDescription
children*ReactNodeText or content for the Link.
href*stringURL or DOM id to navigate to.
classNamestringAdditional CSS classes.
iconbooleanfalse Set the Icon prop to true if you're using just an Icon in your Link. Make sure to pass an Icon as children if true.
onPreview
(e: {
  href: string;
}) => void
Callback function that is run when the preview popover is interacted with.
previewablebooleanDetermines if the Link should render a popover when focused or hovered over.
refRef<HTMLAnchorElement>Ref for the wrapping element.
targetstringSpecifies where to open the link href.
variant
'primary' |'secondary' |'simple' |'link' |'text' 
"link" Controls the styling of the Link.