link.mdx

import SEO from "../components/SEO";

Link

Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>.

Import

import { CLink } from "@chakra-ui/vue";

Usage

<c-link>Chakra UI</c-link>

External Link

<c-link href="https://vue.chakra-ui.com" is-external>
  Chakra Design system <c-icon name="external-link-alt" mx="2px" />
</c-link>

<c-text>
  Did you know that 
  <c-link color="teal.500" href="#">
    links can live inline with text
  </c-link>
</c-text>

Usage with router-link or nuxt-link Library

To use the CLink with a routing component like router-link or nuxt-link, all you need to do is to pass the as prop. It'll replace the rendered a tag with with router-link or nuxt-link's link.

<c-link as="router-link" to="/">
  Home
</c-link>

Props

The CLink component composes the PseudoBox so you can pass all CPseudoBox props.

Name	Type	Default	Description
isExternal	boolean		If true, the link will open in new tab.
isDisabled	boolean		If true, the link will be disabled.