packages/twenty-docs/twenty-ui/navigation/links.mdx
A stylized link component for displaying contact information.
<Tabs> <Tab title="Usage">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:[email protected]"
onClick={handleLinkClick}
>
[email protected]
</ContactLink>
</Router>
);
};
| Props | Type | Description |
|---|---|---|
| className | string | Optional name for additional styling |
| href | string | The target URL or path for the link |
| onClick | function | Callback function to be triggered when the link is clicked |
| children | React.ReactNode | The content to be displayed inside the link |
A stylized link component for displaying links.
<Tabs> <Tab title="Usage">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>
);
};
| Props | Type | Description |
|---|---|---|
| className | string | Optional name for additional styling |
| href | string | The target URL or path for the link |
| onClick | function | Callback function to be triggered when the link is clicked |
| children | React.ReactNode | The content to be displayed inside the link |
A rounded-styled link with a Chip component for links.
<Tabs> <Tab title="Usage">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>
);
};
| Props | Type | Description |
|---|---|---|
| href | string | The target URL or path for the link |
| children | React.ReactNode | The content to be displayed inside the link |
| onClick | function | Callback function to be triggered when the link is clicked |
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
<Tabs> <Tab title="Usage">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>
);
};
| Props | Type | Description |
|---|---|---|
| href | string | The target URL or path for the link |
| children | React.ReactNode | The content to be displayed inside the link |
| type | string | The type of social links. Options include: url, LinkedIn, and Twitter |
| onClick | function | Callback function to be triggered when the link is clicked |