Django Link Component

Link wraps an <a> element with daisyUI link styling and colour variants. Use it in prose, navigation lists, or anywhere you need a consistently styled, theme-aware hyperlink.

Basic Link

Preview

Home

Code

<c-lb.link href="/home">
    <c-lb.text>Home</c-lb.text>
</c-lb.link>

Color Variants

Apply DaisyUI color variants to your links.

Preview

Neutral Primary Secondary Accent Info Success Warning Error

Code

<div class="flex flex-wrap gap-2">
    <c-lb.link href="/neutral" variant="neutral">Neutral</c-lb.link>
    <c-lb.link href="/primary" variant="primary">Primary</c-lb.link>
    <c-lb.link href="/secondary" variant="secondary">Secondary</c-lb.link>
    <c-lb.link href="/accent" variant="accent">Accent</c-lb.link>
    <c-lb.link href="/info" variant="info">Info</c-lb.link>
    <c-lb.link href="/success" variant="success">Success</c-lb.link>
    <c-lb.link href="/warning" variant="warning">Warning</c-lb.link>
    <c-lb.link href="/error" variant="error">Error</c-lb.link>
</div>

Hover Effect

Show underline only on hover for a cleaner look.

Preview

Default (always underlined) Hover (underline on hover) Primary hover Accent hover

Code

<div class="flex flex-wrap gap-2">
    <c-lb.link href="/default">Default (always underlined)</c-lb.link>
    <c-lb.link href="/hover" hover>Hover (underline on hover)</c-lb.link>
    <c-lb.link href="/hover-primary" variant="primary" hover>Primary hover</c-lb.link>
    <c-lb.link href="/hover-accent" variant="accent" hover>Accent hover</c-lb.link>
</div>

Using Viewname

Resolve Django view names automatically. Use l: prefixed attributes to pass URL arguments.

Preview

Home UI Documentation Icons Documentation

Button Component Text Component Link Component Icons Introduction

Code

<div class="flex flex-col gap-4">
    <div class="flex flex-wrap gap-2">
        <c-lb.link viewname="index">Home</c-lb.link>
        <c-lb.link viewname="ui_docs">UI Documentation</c-lb.link>
        <c-lb.link viewname="icons_docs">Icons Documentation</c-lb.link>
    </div>
    <div class="flex flex-wrap gap-2">
        <c-lb.link viewname="ui_docs_detail" l:path="components/basics/button">Button Component</c-lb.link>
        <c-lb.link viewname="ui_docs_detail" l:path="components/basics/text">Text Component</c-lb.link>
        <c-lb.link viewname="ui_docs_detail" l:path="components/basics/link">Link Component</c-lb.link>
        <c-lb.link viewname="icons_docs_detail" l:path="getting-started/introduction">Icons Introduction</c-lb.link>
    </div>
</div>

With Text Component

Combine with text component for styled link text, including icons.

Preview

About Us Contact Home Settings Profile

Code

<div class="flex flex-wrap gap-4">
    <c-lb.link href="/about" hover>
        <c-lb.text icon="rmx.information" variant="primary">About Us</c-lb.text>
    </c-lb.link>
    <c-lb.link href="/contact" hover>
        <c-lb.text icon="rmx.phone" variant="secondary" underline>Contact</c-lb.text>
    </c-lb.link>
    <c-lb.link href="/home" hover>
        <c-lb.text icon="rmx.home">Home</c-lb.text>
    </c-lb.link>
    <c-lb.link href="/settings" hover>
        <c-lb.text icon="rmx.settings">Settings</c-lb.text>
    </c-lb.link>
    <c-lb.link href="/profile" hover>
        <c-lb.text icon.fill="rmx.user">Profile</c-lb.text>
    </c-lb.link>
</div>

API Reference

`c-lb.link`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
as	a button span div	`a`	No	HTML tag to use for the link element
href	string	-	No	Direct URL for the link (alternative to viewname)
viewname	string	-	No	Django view name to resolve (e.g., 'blog:post'). Use l: prefixed attributes for URL arguments
variant	neutral primary secondary accent info success warning error	-	No	Link color variant
hover	boolean	`False`	No	Show underline only on hover

Slot Name	Description
default	Link content (e.g., text, icons, or other components)