DaisyUI Kit 🌼

Using Link Components

This page covers the is prop for Vue and Nuxt (@daisyuikit/vue and @daisyuikit/nuxt). Other frameworks handle routing through their own link components — see your framework's documentation.

Many DaisyUI Kit components support the is prop, which allows you to change the underlying HTML element or Vue component that gets rendered. This is particularly useful for client-side navigation with Vue Router's RouterLink or Nuxt's NuxtLink.

Supported Components

The following components support the is prop for link rendering:

  • Button - Create navigation buttons
  • Card - Make entire cards clickable
  • Badge - Clickable tags/badges
  • Tab - Route-based tab navigation
  • DaisyLink - Styled navigation links
  • Text - Text elements as navigation links

In Nuxt projects, pass is="NuxtLink" along with the to prop.

ButtonLink.vue
CardLink.vue
BadgeLink.vue
DaisyLinkExample.vue
In Vue Router projects (without Nuxt), use is="RouterLink":
<Button is="RouterLink" to="/dashboard" primary>
  Dashboard
</Button>

<Card is="RouterLink" to="/products/123">
  <CardBody>
    <CardTitle>Product Name</CardTitle>
  </CardBody>
</Card>

Benefits
Using the is prop instead of wrapping components:
  1. Cleaner markup - No extra wrapper elements
  2. Proper semantics - The component itself becomes the link
  3. Full styling - All component styles apply correctly
  4. Accessibility - Proper link behavior and keyboard navigation
Other Elements
You can also use is to render as other HTML elements:
<!-- Render as an anchor tag for external links -->
<Button is="a" href="https://example.com" target="_blank">
  External Link
</Button>

<!-- Render as a span -->
<Badge is="span">
  Status
</Badge>

<!-- Render as an article element for semantic HTML -->
<Card is="article">
  <CardBody>Article content</CardBody>
</Card>

DaisyUI Kit 🌼