Layout component

Link

Render an accessible internal or external link with target, relation, size, color, and public focus or click events.

9 props1 slots0 outputsTheme readyResponsive

Interactive playground

Configure Link

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

Live preview

Component code

<Link
  href="#link-demo"
/>

Live examples

Compare configurations and resize the browser to check responsive behavior.

Recommended

Use for routes within the current application.

Live preview

Component usage.wrn

<Link
  label="Open components"
  href="/base"
/>

Compact

Communicate external navigation and use safe target attributes.

Live preview

Component usage.wrn

<Link
  size="sm"
  label="WRNexusJS documentation"
  href="https://wrnexusjs.dev"
  target="_blank"
  external="true"
/>

Advanced

Use a larger link in empty states, promotional cards, and resource lists.

Live preview

Component usage.wrn

<Link
  size="lg"
  color="info"
  label="Explore framework guides"
  href="/framework-guides"
/>

Component API

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

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`label`	string	`"Link"`	No
`href`	string	`"#"`	No
`target`	string	`""`	No
`rel`	string	`""`	No
`underline`	string	`"hover"`	No
`external`	boolean	`false`	No
`class`	string	`""`	No