@neo4j-ndl/react/skills/ndl-react/components/text-link.md

React implementation of Neo4j Design System

# TextLink

Import: `import { TextLink } from '@neo4j-ndl/react'`

## Props

### TextLink

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `children` | `ReactNode` | ✅ |  | The content displayed inside the link |
| `href` | `string` |  |  | The URL the link points to |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `target` | `string` |  | `type === 'external' \|\| type === 'external-underline' ? '_blank' : ''` | Specifies where to open the linked document. If omitted and `type` is `"external"` it defaults to `"_blank"`. |
| `type` | `'external-underline' \| 'external' \| 'internal-icon' \| 'internal-underline' \| 'internal'` |  | `internal` | The type of the text link All types render with an underline and primary text color by default. Additional color styling can be applied via `className`. - 'internal': A link to another page within the application - 'internal-underline': Deprecated alias of 'internal' - 'internal-icon': Deprecated variant with a trailing chevron icon - 'external': A link to an external website. An external link icon is appended. - 'external-underline': Deprecated alias of 'external' |

## Accessibility

## Implementation guidelines

TextLink is always underlined and uses primary text color by default, making it distinguishable in running text. Legacy types `internal-underline` and `external-underline` are kept for compatibility but render the same as `internal` and `external`.
By default the component renders an anchor element but can be overridden with the `as` prop.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextLink } from '@neo4j-ndl/react';

const Component = () => {
  return <TextLink href="/">Link</TextLink>;
};

export default Component;
```

### External

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextLink } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextLink href="https://neo4j.com" type="external">
      Link
    </TextLink>
  );
};

export default Component;
```

### External Underline

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextLink, Typography } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Typography variant="body-medium">
      The quick brown fox{' '}
      <TextLink href="https://neo4j.com" type="external-underline">
        jumps
      </TextLink>{' '}
      over the lazy dog.
    </Typography>
  );
};

export default Component;
```

### Internal Icon

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextLink } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <TextLink href="/" type="internal-icon">
      Link
    </TextLink>
  );
};

export default Component;
```

### Internal Underline

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { TextLink, Typography } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Typography variant="body-medium">
      The quick brown fox{' '}
      <TextLink href="/" type="internal-underline">
        jumps
      </TextLink>{' '}
      over the lazy dog.
    </Typography>
  );
};

export default Component;
```