Back to Schema Browser

Link

Text-styled hyperlink. Always renders as <a>. Use this for inline text links, 'read more' patterns, nav links, and any clickable text that is NOT a button. For filled/outlined CTAs use Button instead.

Required Props: id, text

Structure

All styling goes in props.className as a single Tailwind utility string. Defaults to DaisyUI `link link-hover`. No button chrome by default. Optional inline icon via props.icon.

Properties

PropertyTypeDescriptionExamples
text*requiredstring
Link text content
Learn more
iconobject
Optional inline icon configuration. Common pattern: trailing arrow on 'read more' links.
-
actionobject
Unified link action. Single `href` string encodes destination (HTML-style): `https://...` (external), `/relative` (host routing), `ref:<pageId>` (internal page; append `/path`, `?query`, or `#hash` for suffix), `#anchor` (in-page scroll), `mailto:addr?subject=…&body=…` (email), `tel:+15551234` (phone). Optional `target: _self | _blank` — only meaningful for url/page hrefs. For interactive behavior (show-hide, modal, cart actions, theme toggle) use Button instead — Link is strictly navigational.
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
-
Default: true
-
customobject
Editor metadata (displayName, ...)
-
classNamestring
Tailwind utility classes. Defaults to `link link-hover`. Add `link-primary`, `link-secondary`, etc. for DaisyUI color variants. Avoid `btn` classes — those belong on Button.
link link-hoverlink link-hover link-primary font-semiboldlink link-hover text-base-content/70 hover:text-primary inline-flex items-center gap-1.5
rolestring
-
-
aria-labelstring
-
-
aria-hiddenstring
-
-
aria-describedbystring
-
-
aria-livestring
polite | assertive | off
-
-
rootobject
-
-
handlersobject
Custom JS event handlers. Record<string, string> mapping a React event name (onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, …) to a JS code string evaluated as a function body with `event` in scope. Runs after any `action` on the same event. Execution is suppressed in the editor.
-

Examples

Plain Text Link

Default inline link — underlines on hover

{
  "canDelete": true,
  "canEditName": true,
  "text": "Learn more",
  "className": "link link-hover",
  "action": {
    "type": "link",
    "href": "https://example.com"
  }
}

Read More with Arrow

Common end-of-card 'read more' pattern with trailing arrow

{
  "canDelete": true,
  "canEditName": true,
  "text": "Read more",
  "icon": {
    "value": "ref-icon:tb/TbArrowRight",
    "position": "right",
    "size": "w-4 h-4"
  },
  "className": "link link-hover link-primary font-semibold",
  "action": {
    "type": "link",
    "href": "ref:page_blog_post"
  }
}

Nav Link

Top-nav style text link with no underline until hover

{
  "canDelete": true,
  "canEditName": true,
  "text": "Features",
  "className": "link link-hover text-base-content/80 hover:text-primary font-medium",
  "action": {
    "type": "link",
    "href": "#features"
  }
}

Email Link

Contact email link

{
  "canDelete": true,
  "canEditName": true,
  "text": "hello@example.com",
  "className": "link link-hover link-primary",
  "action": {
    "type": "link",
    "href": "mailto:hello@example.com"
  }
}