All docs

Link

Text-styled hyperlink. Always renders as <a. Defaults to DaisyUI link link-hover (no button chrome). Optional inline icon (common pattern: trailing arrow on "read more" links).

Text-styled hyperlink. Always renders as <a>. Defaults to DaisyUI link link-hover (no button chrome). Optional inline icon (common pattern: trailing arrow on "read more" links).

Link only supports the navigational link action — for show-hide, open-modal, cart, theme actions, use Button.

Key files

Props

PropNotes
textRequired.
iconOptional { value, only?, position?, size?, color? }. only: true requires aria-label.
actionOnly { type: "link", href, target? }. See actions-and-handlers for href shapes.
attrs, handlersStandard.
className, rootDefaults to link link-hover.

href shapes (unified link action)

  • ref:page_<id> — internal page (renderer rewrites to correct path).
  • ref:page_<id>/{{item.slug}} — internal page with dynamic suffix.
  • /shop?category=tees — internal URL with query.
  • https://example.com — external (pair with target: "_blank").
  • #features — in-page anchor (renderer attaches preventDefault + smooth scroll).
  • mailto:hello@example.com?subject=Inquiry — email.
  • tel:+15551234567 — phone.

When to use (vs alternatives)

  • Link — inline text hyperlinks, nav items, footer links, "read more", mailto:/tel:.
  • Button — anything with btn chrome, plus all non-link action types.

Gotchas

  • For column nav (footer): use neutral utilities + visited: + hover:underline on Button (not Link with btn). For tel/mailto in Text HTML use text-primary + visited:text-primary.

Related