Skip to main content
⌘K
Last modified: 4/Oct/2024

Link

The Link can be used to place internal- and external links on the page.

#Usage

import { Link } from '@kinsta/stratus'

const MyComponent = () => (
  <Link href="https://www.kinsta.com" icon="External" children="Visit Kinsta" />
)

#Props

#isDisabled
boolean
Renders the link as an unclickable text
false
#isBlank
boolean
It opens the link in a new window
false
#icon
"AnalyticsAlt" | "AnalyticsCircleAlt" | "AnalyticsCircleSolidAlt" | "AnalyticsCircleSolid" | "AnalyticsCircle" | "AnalyticsSmall" | "AnalyticsSquareAlt" | "AnalyticsSquareSolidAlt" | ... 530 more ... | LinkIconInterface
If string icon to show at text end
#isBlock
boolean
Truthy value styles the link for block placement
#tooltip
string | number | ReactElement<any, string | JSXElementConstructor<any>>
Text of the tooltip
#isHighlighted
boolean
Defines that the link should get more emphasis

#Types

  • LinkProps: props of the Link component processed by stratus
  • LinkInterface: LinkProps extended by Omit<AllHTMLAttributes<HTMLAnchorElement>, 'as'>

Read more about types here

#Usage in MyKinsta

In most cases the Stratus Link shouldn't be used in MyKinsta environment. There is an MK-Link component that utilises the Stratus Link, and it decorates the Link with icons according to the given link. There are places in MK where the isHighlighted version is used, like the Migration page and the HelpCenter. It is used because these pages have more continues text and the links needs to stand out of the context. If you want to use the Stratus Link in MK please consult a designer or a stratus team member.