Link is used to navigation through pages. Styled to resemble a hyperlink and semantically renders as `<a>`.

icon

iconAfter

variant

() => (
  <Link icon={IconInformation} iconAfter={IconArrowUpRight} href="https://www.sema4.ai" target="_blank" rel="noopener">
    Link
  </Link>
);

/**
 * Link component can be enhaced with an appending and/or appending icon to explain the link's action.
 */
export const WithIcon

Link

() => (
  <>
    <Link icon={IconInformation} iconAfter={IconArrowUpRight} href="/component/link" variant="primary">
      Link
    </Link>
    <Link icon={IconInformation} iconAfter={IconArrowUpRight} href="/component/link" variant="secondary">
      Link
    </Link>
    <Link icon={IconInformation} iconAfter={IconArrowUpRight} href="/component/link" variant="subtle">
      Link
    </Link>
    <Link icon={IconInformation} iconAfter={IconArrowUpRight} href="/component/link" variant="dashed">
      Link
    </Link>
  </>
)

Link component is available in mutliple style  variants.


Variants

() => {
  return <Link as="button">Button</Link>;
}

\`Link\` component can be rendered as button using \`as="button"\` prop.


Name	Description	Default
icon	Icon prepended before Link content	-
iconAfter	Icon appended after Link content	-
variant	Link style variant	-

Link component

Variants

As Button