Kaiko UI Kaiko UI

Link

Stable

A link component that restores underline styling and provides color variants based on DaisyUI. Supports always-visible and hover-only underlines.

API Reference

Attribute Description Type Default
href Link destination URL string "#"
color Sets the link color theme string ""
variant Link style variant string "default"
hover Shows underline only on hover instead of always visible boolean False
target Specifies where to open the linked document string ""

color

neutral primary secondary accent info success warning error

Accessibility

Underlines: the component restores underline styling that Tailwind CSS resets by default. Underlines are an important visual cue for links — use hover for cleaner designs but ensure sufficient color contrast still distinguishes the link from surrounding text.

External links: when using target="_blank", add rel="noopener noreferrer" via the passthrough to prevent reverse tabnapping and inform assistive technology users that the link opens in a new tab.

Color alone: avoid using color as the only visual indicator that text is a link. Underlines or font-semibold provide an additional non-color cue.

Examples

Usage 


<c-link href="https://example.com">Default Link</c-link>
<c-link href="https://example.com" color="primary" hover>Primary Hover</c-link>

Basic Usage

Default Link Hover Underline 
<c-link href="https://example.com">Default Link</c-link>
<c-link href="https://example.com" hover>Hover Underline</c-link>

Colors

Neutral Primary Secondary Accent Info Success Warning Error 
<c-link color="primary" href="#">Primary</c-link>
<c-link color="success" href="#">Success</c-link>
<c-link color="error" href="#">Error</c-link>

Color + Hover Underline

Primary Hover Success Hover Error Hover Info Hover 
<c-link color="primary" hover href="#">Primary Hover</c-link>

Inline Text Links

Ready to get started? Sign up now or learn more . 

<p>
  Ready to get started?
  <c-link color="primary" href="#" class="font-semibold">Sign up now</c-link>
  or
  <c-link color="secondary" href="#" hover>learn more</c-link>.
</p>

Navigation Menu 

<nav class="flex space-x-6">
  <c-link color="primary" href="#" hover>Home</c-link>
  <c-link color="neutral" href="#" hover>About</c-link>
  <c-link color="neutral" href="#" hover>Services</c-link>
  <c-link color="neutral" href="#" hover>Contact</c-link>
</nav>

External Links

DaisyUI Documentation Tailwind CSS 
<c-link color="info" href="https://daisyui.com" target="_blank">
  DaisyUI Documentation
</c-link>