> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Link

> Link component with hover effects and external link indicator

export const LinkHideIconPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/LinkHideIcon" frameBorder="0" width="100%" height="260"></iframe>;

export const LinkDisabledPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/LinkDisabled" frameBorder="0" width="100%" height="260"></iframe>;

export const LinkExternalPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/LinkExternal" frameBorder="0" width="100%" height="260"></iframe>;

export const LinkBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/LinkBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Link component provides styled links with hover effects, external link indicators, and disabled states.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Link } from '@peppermint-design/devreadykit-custom';

    export default function LinkBasic() {
      return (
        <Link href="/about">
          Learn more
        </Link>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <LinkBasicPreview />
  </Tab>
</Tabs>

## External Link

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Link } from '@peppermint-design/devreadykit-custom';

    <Link href="https://example.com">
      Visit external site
    </Link>
    ```
  </Tab>

  <Tab title="Preview">
    <LinkExternalPreview />
  </Tab>
</Tabs>

## Hide Icon

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Link } from '@peppermint-design/devreadykit-custom';

    <Link href="/page" hideIcon>
      Internal link without icon
    </Link>
    ```
  </Tab>

  <Tab title="Preview">
    <LinkHideIconPreview />
  </Tab>
</Tabs>

## Disabled

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Link } from '@peppermint-design/devreadykit-custom';

    <Link href="/page" disabled>
      Disabled link
    </Link>
    ```
  </Tab>

  <Tab title="Preview">
    <LinkDisabledPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop      | Type              | Default | Description             |
  | :-------- | :---------------- | :------ | :---------------------- |
  | href      | `string`          | -       | Link URL                |
  | children  | `React.ReactNode` | -       | Link content            |
  | disabled  | `boolean`         | `false` | Disabled state          |
  | hideIcon  | `boolean`         | `false` | Hide external link icon |
  | className | `string`          | -       | Additional CSS classes  |
</PropsTable>