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
Link action. Supported types only: link-url (external or internal with query string), link-page (internal site page), scroll-to (anchor on current page), email (mailto:), phone (tel:). 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-url",
    "url": "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-page",
    "pageId": "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": "scroll-to",
    "anchor": "features"
  }
}

Email Link

Contact email link

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