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" 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 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.