---
title: Link Button
description: A styled anchor element that looks like an inline text link.
---

## Preview

<ComponentPreview name="p-link-button-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx @olyx/cli@latest add link-button
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="link-button" title="components/ui/link-button.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { LinkButton } from "@/components/ui/link-button"
```

```tsx
<LinkButton href="#">Learn more</LinkButton>
```

## API Reference

#### LinkButton

Styled anchor element with variant, size, and underline options.

| Prop        | Type                                         | Default   |
| ----------- | -------------------------------------------- | --------- |
| `variant`   | `"gray" \| "black" \| "primary" \| "error"` | `"black"` |
| `size`      | `"sm" \| "md"`                               | `"md"`    |
| `underline` | `boolean`                                    | `true`    |

All props from `React.ComponentProps<'a'>` are also supported.

## Examples

### Gray

<ComponentPreview name="p-link-button-2" />

### Primary

<ComponentPreview name="p-link-button-3" />

### Error

<ComponentPreview name="p-link-button-4" />

### Small

<ComponentPreview name="p-link-button-5" />

### Without Underline

<ComponentPreview name="p-link-button-6" />

### Disabled

<ComponentPreview name="p-link-button-7" />