Link Button

A button that always renders as an <a> element — same visual variants as Button but with anchor semantics. Use for navigation; use Button for form actions.

ExamplesCodeUsageChangelog

Variants

PrimarySecondaryGhostDanger

Tailwind v4

<LinkButton href="/dashboard">Go to dashboard</LinkButton>
<LinkButton href="/reports" variant="secondary">View reports</LinkButton>
<LinkButton href="/help" variant="ghost">Help</LinkButton>

Sizes

SmallMediumLarge

Tailwind v4

<LinkButton href="/page" size="sm">Small</LinkButton>
<LinkButton href="/page" size="md">Medium</LinkButton>
<LinkButton href="/page" size="lg">Large</LinkButton>

Open in new tab

Open in new tab

Tailwind v4

<LinkButton
  href="https://docs.example.com"
  target="_blank"
  rel="noopener noreferrer"
  variant="secondary"
>
  Documentation
</LinkButton>

Disabled

Can't navigate

Tailwind v4

<LinkButton href="/page" :disabled="!hasPermission">View page</LinkButton>

With icons

Add record

Tailwind v4

<LinkButton href="/new" variant="secondary">
  <template #icon-before><PlusIcon /></template>
  Add record
</LinkButton>

Props

Prop	Type	Default	Description
href	string	—	Required. The navigation URL
target	string	—	Native anchor target — e.g. '_blank'
rel	string	—	Native anchor rel — e.g. 'noopener noreferrer'
variant	'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'subtle'	'primary'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Prevents navigation and dims the element

Slots

Slot	Description
default	Link label
icon-before	Icon displayed before the label
icon-after	Icon displayed after the label