---
title: Link
description: Link is used to navigate to other pages or sections. It provides consistent styling for hyperlinks throughout the interface.
category: Display
related: [Button, Text]
commonPatterns: [navigation-link, external-link, inline-link]
---

Source: https://clickhouse.design/click-ui/link

# Link

Link provides consistent styling for hyperlinks and navigation elements. It supports different sizes, weights, and can include icons for better visual context.

## Example

## Props

| Prop      | Type                | Default value | Description                                                            |
| --------- | ------------------- | ------------- | ---------------------------------------------------------------------- |
| size      | `TextSize`          | `"md"`        | Font size of the link text                                             |
| weight    | `TextWeight`        | `"normal"`    | Font weight of the link text                                           |
| icon      | `IconName`          | `undefined`   | Icon name to display alongside the link text                           |
| component | `ElementType`       | `"a"`         | HTML element type to render (e.g., "a", "button", or custom component) |
| onClick   | `ReactEventHandler` | `undefined`   | Callback function called when the link is clicked                      |

```tsx
import { Link } from '@clickhouse/click-ui'

<Link href="https://clickhouse.com" icon="external-link">
Visit ClickHouse
</Link>
```

## Quick start

```tsx
import { Link } from '@clickhouse/click-ui'

function MyLink() {
return (
  <Link href="https://clickhouse.com">
    Visit ClickHouse
  </Link>
)
}
```

## Related components

- **Button**: For primary actions, whereas Link is for navigation.
- **Text**: Links can be styled similarly to text components.

## Common use cases

### Navigation link

```tsx
import { Link, Container } from '@clickhouse/click-ui'

function NavigationLinks() {
return (
  <Container orientation='horizontal' gap='md'>
    <Link href='/dashboard'>Dashboard</Link>
    <Link href='/settings'>Settings</Link>
    <Link href='/profile'>Profile</Link>
  </Container>
)
}
```

### External link

```tsx
import { Link } from '@clickhouse/click-ui'

function ExternalLink() {
return (
  <Link href='https://clickhouse.com' icon='external-link' target='_blank'>
    Visit ClickHouse Website
  </Link>
)
}
```

### Inline link

```tsx
import { Link, Text } from '@clickhouse/click-ui'

function InlineLink() {
return (
  <Text>
    Learn more about{' '}
    <Link href='/docs'>our documentation</Link>
    {' '}or{' '}
    <Link href='/support'>contact support</Link>
    .
  </Text>
)
}
```

### Different sizes

### With icons