Usage

Default

Use the default slot to set the text of the component.

Colors

Use the color prop to customize the component's color.

Underline

Use the underline prop to control whether the link has an underline.

<script setup lang="ts">
import CLLink from '@codeandfunction/callaloo/CLLink';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLLink :color="CLColors.Primary" href="#" :underline="true">With Underline</CLLink>
  <CLLink :color="CLColors.Primary" href="#" :underline="false">Without Underline</CLLink>
</template>

External Links

Use the external prop to indicate that the link opens in a new tab/window. This automatically adds an external link icon.

<script setup lang="ts">
import CLLink from '@codeandfunction/callaloo/CLLink';
import { CLColors, CLLinkTarget } from '@codeandfunction/callaloo';
</script>

<template>
  <CLLink :color="CLColors.Primary" href="https://example.com" :external="true" :target="CLLinkTarget.Blank">External Link</CLLink>
  <CLLink :color="CLColors.Primary" href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Internal Link</CLLink>
</template>

Props