twenty/packages/twenty-docs/l/tr/twenty-ui/navigation/links.mdx

---
title: Bağlantılar
icon: bağlantı
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Başlık" />
</Frame>

## Kişi bağlantısı

İletişim bilgilerini görüntülemek için stilize edilmiş bir bağlantı bileşeni.

<Tabs>
<Tab title="Kullanım">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:example@example.com"
        onClick={handleLinkClick}
      >
        example@example.com
      </ContactLink>
    </Router>
  );
};
```


</Tab>
<Tab title="Özellikler">


| Özellikler | Tür               | Açıklama                                              |
| ---------- | ----------------- | ----------------------------------------------------- |
| sınıfAdı   | string            | Ek stil için isteğe bağlı isim                        |
| href       | string            | Bağlantı için hedef URL veya yol                      |
| onClick    | function          | Bağlantıya tıklandığında tetiklenecek callback işlevi |
| çocuklar   | `React.ReactNode` | Bağlantının içinde görüntülenecek içerik              |




</Tab>

</Tabs>

## Ham Bağlantı

Bağlantılar için stilize edilmiş bir bağlantı bileşeni.

<Tabs>
<Tab title="Kullanım">

```jsx
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

```


</Tab>
<Tab title="Özellikler">


| Özellikler | Tür               | Açıklama                                              |
| ---------- | ----------------- | ----------------------------------------------------- |
| className  | string            | Ek stil için isteğe bağlı isim                        |
| href       | string            | Bağlantı için hedef URL veya yol                      |
| onClick    | function          | Bağlantıya tıklandığında tetiklenecek callback işlevi |
| çocuklar   | `React.ReactNode` | Bağlantının içinde görüntülenecek içerik              |




</Tab>
</Tabs>

## Yuvarlak Bağlantı

Yuvarlak stil ile Chip bileşeni olan bir bağlantı.

<Tabs>
<Tab title="Kullanım">

```jsx
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};
```

</Tab>

<Tab title="Özellikler">


| Özellikler | Tür               | Açıklama                                              |
| ---------- | ----------------- | ----------------------------------------------------- |
| href       | dize              | Bağlantı için hedef URL veya yol                      |
| çocuklar   | `React.ReactNode` | Bağlantının içinde görüntülenecek içerik              |
| onClick    | fonksiyon         | Bağlantıya tıklandığında tetiklenecek callback işlevi |



</Tab>
</Tabs>

## Sosyal Bağlantı

URL'ler, LinkedIn ve X (veya Twitter) gibi çeşitli sosyal bağlantı türleri için desteklenen stilize edilmiş sosyal bağlantılar.

<Tabs>
<Tab title="Kullanım">

```jsx
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Özellikler">


| Özellikler | Tür               | Açıklama                                                                        |
| ---------- | ----------------- | ------------------------------------------------------------------------------- |
| href       | string            | Bağlantı için hedef URL veya yol                                                |
| çocuklar   | `React.ReactNode` | Bağlantının içinde görüntülenecek içerik                                        |
| tür        | string            | Sosyal bağlantı türü. Seçenekler şunları içerir: `url`, `LinkedIn` ve `Twitter` |
| onClick    | function          | Bağlantıya tıklandığında tetiklenecek callback işlevi                           |




</Tab>
</Tabs>