> ## 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.

# Enlaces

<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="Encabezado" width="597" height="281" data-path="images/user-guide/what-is-twenty/20.png" />
</Frame>

## Enlace de Contacto

Un componente de enlace estilizado para mostrar información de contacto.

<Tabs>
  <Tab title="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "Props"     | Tipo              | Descripción                                                                     |
    | ----------- | ----------------- | ------------------------------------------------------------------------------- |
    | "className" | string            | "Nombre opcional para estilización adicional"                                   |
    | href        | string            | La URL o ruta objetivo del enlace                                               |
    | onClick     | "función"         | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
    | hijos       | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                  |
  </Tab>
</Tabs>

## Enlace Sin Estilo

Un componente de enlace estilizado para mostrar enlaces.

<Tabs>
  <Tab title="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "Props"       | Tipo              | Descripción                                                                     |
    | ------------- | ----------------- | ------------------------------------------------------------------------------- |
    | nombreDeClase | string            | Nombre opcional para estilo adicional                                           |
    | href          | string            | La URL o ruta objetivo del enlace                                               |
    | onClick       | función           | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
    | hijos         | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                  |
  </Tab>
</Tabs>

## Enlace Redondeado

Un enlace de estilo redondeado con un componente Chip para enlaces.

<Tabs>
  <Tab title="&#x22;Uso&#x22;">
    ```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="&#x22;Props&#x22;">
    | "Props" | Tipo              | Descripción                                                                     |
    | ------- | ----------------- | ------------------------------------------------------------------------------- |
    | href    | cadena            | La URL o ruta objetivo del enlace                                               |
    | hijos   | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                  |
    | onClick | "función"         | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
  </Tab>
</Tabs>

## Enlace Social

Enlaces sociales estilizados, con soporte para varios tipos de enlaces sociales, como URLs, LinkedIn y X (o Twitter).

<Tabs>
  <Tab title="Uso">
    ```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="Props">
    | Props   | Tipo              | Descripción                                                                        |
    | ------- | ----------------- | ---------------------------------------------------------------------------------- |
    | href    | string            | La URL o ruta objetivo del enlace                                                  |
    | hijos   | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                     |
    | tipo    | string            | El tipo de enlaces sociales. Las opciones incluyen: `url`, `LinkedIn`, y `Twitter` |
    | onClick | función           | Función de devolución de llamada que se activa cuando se hace clic en el enlace    |
  </Tab>
</Tabs>