Link
Tailwind's CSS reset removes styles from links. Link makes them pretty again.
Code Example
<Link>I'm a simple link</Link>Components
Link is a standalone component.
Link
Link can be customized with the following props:
| Prop | Type | Description |
|---|---|---|
is | string | Sets the HTML tag. |
hover | boolean | Only show underline on hover. |
color | string | Sets the color to one of the below prop names. |
| Â Â Â neutral | boolean | Sets the color to neutral. |
| Â Â Â primary | boolean | Sets the color to primary. |
| Â Â Â secondary | boolean | Sets the color to secondary. |
| Â Â Â accent | boolean | Sets the color to accent. |
| Â Â Â info | boolean | Sets the color to info. |
| Â Â Â success | boolean | Sets the color to success. |
| Â Â Â warning | boolean | Sets the color to warning. |
| Â Â Â error | boolean | Sets the color to error. |
Usage
If you try to use <Link> and haven't configured a component prefix (like <DaisyLink>), Vue will need some help knowing which element you need.
Since link (lowercase) is an HTML element, you'll need to manually import link into your Vue file:
<script setup lang="ts">
import { Link } from 'daisy-ui-kit'
</script>
<template>
<Link href="/">Home</Link>
</template>Color
There are two ways of specifying Button color:
- The
neutral,primary,secondary,accent,success,info,warning, anderrorboolean props. - The
colorprop, which accepts a string with any of the above prop names.
Code Example
<Link primary>I'm a simple link</Link>Hover
Use the hover prop to only underline while hovered.
Code Example
<Link hover>I'm a simple link</Link>