Marketing component

Text Link

Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.

14 props0 slots3 outputsTheme readyResponsive

Interactive playground

Configure Text Link

Change any prop and inspect the server-rendered component immediately.

Live preview

Text Link

Component code

<TextLink
  label="Text Link"
  href="#text-link-demo"
/>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Inline directional link

Use a lightweight link at the end of a card, section, or short content block.

Live preview

Learn more

Component usage.wrn

<TextLink
  href="#learn"
/>

Compact

Underlined content link

Use an underline when the link appears inside long-form text.

Live preview

Read the complete guide

Component usage.wrn

<TextLink
  label="Read the complete guide"
  href="#guide"
  icon="icon-[lucide--arrow-right]"
  showArrow="false"
  underline="true"
  size="sm"
  variant="secondary"
/>

Advanced

External developer link

Clearly communicate that a resource opens outside the current application.

Live preview

Open WRNexusJS documentation

Component usage.wrn

<TextLink
  label="Open WRNexusJS documentation"
  href="https://wrnexusjs.dev"
  target="_blank"
  external="true"
  icon="icon-[lucide--book-open]"
  showArrow="false"
  size="lg"
  variant="soft"
/>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@clickFires when the interactive surface is activated.

@focusFires when the interactive control receives focus.

@blurFires when focus leaves the interactive control.

Declarative handlers.wrn

<TextLink
  @click='console.log(payload)'
  @focus='console.log(payload)'
  @blur='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"TextLink\"], [data-component=\"TextLink\"]")

if (component) registerOutputHandler(component, "click", (payload) => {
  console.log("click", payload)
})

if (component) registerOutputHandler(component, "focus", (payload) => {
  console.log("focus", payload)
})

if (component) registerOutputHandler(component, "blur", (payload) => {
  console.log("blur", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`label`	string	`"Learn more"`	No
`href`	string	`"#"`	No
`target`	string	`""`	No
`rel`	string	`""`	No
`external`	boolean	`false`	No
`icon`	string	`""`	No
`iconPosition`	string	`"start"`	No
`showArrow`	boolean	`true`	No
`underline`	boolean	`false`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`disabled`	boolean	`false`	No
`class`	string	`""`	No