Link Button

Inline text link styled as a button action — for navigation, supplementary actions, and inline prose controls.

Base Styles

DaisyUI's btn-link strips all button chrome and renders a bare hyperlink-style label. Use it on both <a> and <button>.

View details Learn more Remove

Default · Default on <button> · Primary colour · Error colour

<a href="/path" class="btn btn-link px-0">View details</a>

<button class="btn btn-link px-0">Reset filters</button>

<!-- Colour variants -->
<a href="/path" class="btn btn-link btn-primary px-0">Learn more</a>
<a href="/path" class="btn btn-link btn-error   px-0">Remove</a>

With Icon

Continue reading Open in new tab Download CSV Back

Arrow suffix · External · Download (prefix) · Back (prefix)

<!-- Arrow suffix -->
<a href="/next" class="btn btn-link px-0 gap-1">
    Continue reading
    <i data-lucide="arrow-right" style="width:14px;height:14px;"></i>
</a>

<!-- External link -->
<a href="https://..." target="_blank" rel="noopener" class="btn btn-link px-0 gap-1">
    Open in new tab
    <i data-lucide="external-link" style="width:13px;height:13px;"></i>
</a>

<!-- Icon prefix -->
<a href="/file.csv" class="btn btn-link px-0 gap-1">
    <i data-lucide="download" style="width:14px;height:14px;"></i>
    Download CSV
</a>

Sizes

Extra small Small Default Large

xs · sm · md (default) · lg

<a href="/path" class="btn btn-link btn-xs px-0">Extra small</a>
<a href="/path" class="btn btn-link btn-sm px-0">Small</a>
<a href="/path" class="btn btn-link         px-0">Default</a>
<a href="/path" class="btn btn-link btn-lg  px-0">Large</a>

States

Default Default

Hover Hover

Active page Active

Disabled Disabled

Click "Save changes" to trigger the loading state

<!-- Disabled — use btn-disabled on <a> (no native disabled attr) -->
<a class="btn btn-link px-0 btn-disabled" aria-disabled="true" tabindex="-1">
    Disabled
</a>

<!-- Loading state on <button> -->
<button class="btn btn-link px-0 gap-1.5"
        :disabled="loading"
        x-data="{ loading: false }"
        @click="loading = true; setTimeout(() => loading = false, 2000)">
    <span x-show="loading" class="loading loading-spinner loading-xs"></span>
    <span x-text="loading ? 'Saving…' : 'Save changes'"></span>
</button>

Inline in Prose

Link buttons sit naturally inside a sentence without breaking line-height. Avoid btn padding here — use a plain <a> with Tailwind utility classes instead.

Your order has been placed successfully. View order #1042 or continue shopping.

By continuing you agree to our Terms of Service and Privacy Policy.

<!-- Inside prose: skip btn class entirely, use Tailwind utilities -->
<p class="text-sm leading-relaxed">
    Your order has been placed.
    <a href="/orders/1042"
       class="text-blue-600 underline underline-offset-2 hover:text-blue-800 transition-colors">
        View order #1042
    </a>
    or
    <a href="/shop"
       class="text-blue-600 underline underline-offset-2 hover:text-blue-800 transition-colors">
        continue shopping
    </a>.
</p>

Content Density

Minimal

Forgot password?

Card footer

Edit

Dense action row

Preview Duplicate Export Archive Delete

<!-- Card footer pattern -->
<div class="flex items-center justify-between">
    <button class="btn btn-link btn-sm px-0 btn-error gap-1">
        <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
        Delete
    </button>
    <div class="flex gap-3">
        <button class="btn btn-link btn-sm px-0">Cancel</button>
        <a href="/edit" class="btn btn-link btn-sm px-0 gap-1">
            Edit
            <i data-lucide="pencil" style="width:12px;height:12px;"></i>
        </a>
    </div>
</div>

<!-- Dense action row -->
<div class="flex flex-wrap gap-x-4 gap-y-1">
    <a href="#" class="btn btn-link btn-xs px-0">Preview</a>
    <a href="#" class="btn btn-link btn-xs px-0">Duplicate</a>
    <a href="#" class="btn btn-link btn-xs px-0 btn-error">Delete</a>
</div>

Usage Notes

Use <a href> for navigation (page change, route, external URL) and <button> for in-page actions (reset, delete, toggle). Semantics matter for keyboard and screen reader users.
btn-link adds DaisyUI's link color and underline-on-hover. Add px-0 to remove the default horizontal padding when the link sits flush with other text.
Disable on <a> with btn-disabled + aria-disabled="true" + tabindex="-1" — the native disabled attribute only works on form elements.
Inside body copy, skip btn entirely and use plain Tailwind utilities — btn sets display:inline-flex and a fixed height that breaks natural line-height.