UI Components

Link Button

A button styled as a link with Next.js routing support

Quick Preview

Installation

// Copy the LinkButton component from
src/components/ui/LinkButton.tsx

Usage

import { LinkButton } from '@/components/ui/LinkButton'

export default function MyComponent() {
  return (
    <LinkButton href="/about" variant="primary">
      Learn More
    </LinkButton>
  )
}

Examples

Internal Link

Navigate to internal pages using Next.js Link

Learn More

External Link

Open external links in new tab with security attributes

Visit GitHub

Variants

LinkButton with different visual styles

Primary Secondary Outline Ghost

Sizes

LinkButton in different sizes

Small Medium Large

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Link Button in React/Next.js.
Goal: recreate the same overall UI and behavior as the Link Button reference from a component gallery.
What it needs to communicate: A button styled as a link with Next.js routing support.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- href: string — required — URL to navigate to
- variant: "primary" | "secondary" | "outline" | "ghost" — default "primary" — Visual style variant
- size: "sm" | "md" | "lg" — default "md" — Size of the button
- external: boolean — Open link in new tab with security attributes

Reference usage patterns:
- Internal Link

```tsx
<LinkButton href="/about">Learn More</LinkButton>
```

- External Link

```tsx
<LinkButton href="https://example.com" external>
  Visit Website
</LinkButton>
```

Feature expectations:
- Automatic Next.js Link for internal navigation
- External link support with target="_blank"
- Same styling as Button component
- Security attributes for external links

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`href`*	`string`	-	URL to navigate to
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost"`	`"primary"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the button
`external`	`boolean`	-	Open link in new tab with security attributes

Features

✓Automatic Next.js Link for internal navigation
✓External link support with target="_blank"
✓Same styling as Button component
✓Security attributes for external links

← Back to UI Components