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#
Editable Example
<c-link>Chakra UI</c-link>
External Link#
Editable Example
<c-link href="https://vue.chakra-ui.com" is-external>
Chakra Design system <c-icon name="external-link" mx="2px" />
</c-link>
Did you know that links can live inline with text
Editable Example
<c-text>
Did you know that
<c-link color="teal.500" href="#">
links can live inline with text
</c-link>
</c-text>
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.
Editable Example
<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. |
❤️ Contribute to this page
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!