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

# 링크

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/what-is-twenty/20.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2063e7c602fea7329b99090fcbeac21c" alt="헤더" width="597" height="281" data-path="images/user-guide/what-is-twenty/20.png" />
</Frame>

## 연락 링크

연락처 정보를 표시하기 위한 스타일화된 링크 구성 요소입니다.

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    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="프로퍼티">
    | 프로퍼티     | 유형                | 설명                    |
    | -------- | ----------------- | --------------------- |
    | 클래스 네임   | 문자열               | 추가 스타일을 위한 선택적 이름     |
    | href     | 문자열               | 링크의 대상 URL 또는 경로      |
    | onClick  | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
    | children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
  </Tab>
</Tabs>

## 원시 링크

링크를 표시하기 위한 스타일화된 링크 구성 요소입니다.

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    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="프로퍼티">
    | 프로퍼티     | 유형                | 설명                    |
    | -------- | ----------------- | --------------------- |
    | 클래스 네임   | 문자열               | 추가 스타일을 위한 선택적 이름     |
    | href     | 문자열               | 링크의 대상 URL 또는 경로      |
    | onClick  | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
    | children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
  </Tab>
</Tabs>

## 둥근 링크

Chip 구성 요소가 있는 라운드 스타일 링크입니다.

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    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="프로퍼티">
    | 프로퍼티     | 유형                | 설명                    |
    | -------- | ----------------- | --------------------- |
    | href     | 문자열               | 링크의 대상 URL 또는 경로      |
    | children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
    | onClick  | 기능                | 링크가 클릭될 때 트리거되는 콜백 함수 |
  </Tab>
</Tabs>

## 소셜 링크

URL, LinkedIn 및 X(또는 Twitter)와 같은 다양한 소셜 링크 유형을 지원하는 스타일화된 소셜 링크입니다.

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    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="프로퍼티">
    | 프로퍼티     | 유형                | 설명                                                      |
    | -------- | ----------------- | ------------------------------------------------------- |
    | href     | 문자열               | 링크의 대상 URL 또는 경로                                        |
    | children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠                                          |
    | 유형       | 문자열               | 소셜 링크 유형입니다. 옵션은 다음과 같습니다: `url`, `LinkedIn`, `Twitter` |
    | onClick  | 기능                | 링크를 클릭할 때 호출되는 콜백 함수                                    |
  </Tab>
</Tabs>