Link Button

Link buttons render as anchor elements styled as text links. They are used for navigation actions and inline links that need button-like behavior.

Link Button Playground

Preview

Code

Link Button

Controls

Type:

Primary

Neutral

Error

Size:

Default

Small

Leading Icon:

Trailing Icon:

Disabled:

Installation

You can add the link button component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

LinkButton.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { LinkButton } from '@versaui/ui/components/Button';

<LinkButton>Learn More</LinkButton>

Types

Three color variants for different contexts:

// Primary (default) — brand color
<LinkButton>Learn More</LinkButton>

// Neutral — subtle, secondary actions
<LinkButton type="neutral">Cancel</LinkButton>

// Error — destructive actions
<LinkButton type="error">Remove Item</LinkButton>

Size Variants

<LinkButton size="default">Default Size</LinkButton>
<LinkButton size="small">Small Size</LinkButton>

With Icons

Leading and trailing icons can be added independently:

import { ArrowRightIcon, HouseIcon, ExternalLinkIcon } from '@phosphor-icons/react';

// Leading icon
<LinkButton leadingIcon={<HouseIcon />}>
  Go Home
</LinkButton>

// Trailing icon
<LinkButton trailingIcon={<ArrowRightIcon />}>
  Continue
</LinkButton>

// Both icons
<LinkButton leadingIcon={<HouseIcon />} trailingIcon={<ArrowRightIcon />}>
  Navigate
</LinkButton>

<LinkButton href="/settings">Go to Settings</LinkButton>

<LinkButton href="https://example.com" target="_blank">
  Open External Link
</LinkButton>

Disabled State

<LinkButton disabled>Unavailable</LinkButton>

Accessibility

Renders as <a> element for proper semantics
Keyboard accessible with visible focus ring
Disabled state uses aria-disabled and prevents navigation
Extends native anchor attributes (href, target, rel)

LinkButton Props

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Button label content.
`type`	`'primary' \| 'neutral' \| 'error'`	`'primary'`	Color variant.
`size`	`'default' \| 'small'`	`'default'`	Button size.
`leadingIcon`	`ReactNode`	`—`	Icon before the label.
`trailingIcon`	`ReactNode`	`—`	Icon after the label.
`disabled`	`boolean`	`false`	Prevents interaction and navigation.
`href`	`string`	`—`	Link destination URL.
`onClick`	`(e: MouseEvent) => void`	`—`	Click handler.
`className`	`string`	`''`	Additional CSS classes.