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


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


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

Editable Example
<c-link href="" is-external>
  Chakra Design system <c-icon name="external-link" mx="2px" />
Editable Example
  Did you know that 
  <c-link color="teal.500" href="#">
    links can live inline with 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.

Editable Example
<c-link as="router-link" to="/">


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

isExternalbooleanIf true, the link will open in new tab.
isDisabledbooleanIf true, the link will be disabled.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!