Link button

Interactive documentation for the link button component. Change props in the playground, inspect states, and copy the generated example.

clicks: 0

Preview

<LinkButton
  to="https://google.com"
  label="Link"
  leading-icon="lucide:heart"
  trailing-icon="lucide:arrow-right"
>
  Link
</LinkButton>

Examples for link mode, button mode, and disabled state.

This table matches the current LinkButtonProps interface.

Prop	Type	Default	Description
as	'link' \| 'button'	'link'	Controls which element is rendered. link renders NuxtLink, button renders a native button.
to	string	undefined	Target route or URL for NuxtLink. Ignored when as="button" or when disabled is true.
label	string	undefined	Fallback text rendered inside the default slot when no slot content is provided.
target	'_self' \| '_blank' \| '_parent' \| '_top'	undefined	Native target attribute passed to NuxtLink.
size	's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl'	'm'	Controls gap, vertical padding, font size, font weight, and icon size.
color	'cocaine' \| 'midnight'	'midnight'	Text and underline color variant.
leadingIcon	string	undefined	Icon rendered before the label through CustomIcon.
trailingIcon	string	undefined	Icon rendered after the label through CustomIcon.
disabled	boolean	false	Disables interaction. Link mode removes the to prop, button mode sets the native disabled attribute.