DaisyLink

DaisyLink is a styled anchor element that can be customized with various color options. It supports different color variants and hover effects to enhance your UI's navigation elements.

⚠️ This component is prefixed with Daisy to avoid conflicts with native HTML elements. Hence, you must use DaisyLink instead of Link.

Basic Usage

Code Example
Basic.vue

The Link component is a styled anchor element that can be customized with various color options. It follows the clean, template-driven class binding style for Vue components.

Link Props Type Description
is
string

The HTML tag or component to render as. Default is a.

hover
boolean

Applies the hover effect to the link.

color
string

Sets the color of the link. Options: - neutral - primary - secondary - accent - success - info - warning - error

   
neutral
boolean

Shortcut for color="neutral".

   
primary
boolean

Shortcut for color="primary".

   
secondary
boolean

Shortcut for color="secondary".

   
accent
boolean

Shortcut for color="accent".

   
success
boolean

Shortcut for color="success".

   
info
boolean

Shortcut for color="info".

   
warning
boolean

Shortcut for color="warning".

   
error
boolean

Shortcut for color="error".

Link Slots Description
default

The default slot. Content to be displayed inside the link.

Examples

A simple styled link.

Code Example
Basic.vue

Colors

Links with all available color options.

Hover Effect

Links with color and hover effect enabled.