Components
Developers
Contact Link
A stylized link component for displaying contact information.
Usage
Props
import { BrowserRouter as Router } from 'react-router-dom'; import { ContactLink } from '@/ui/navigation/link/components/ContactLink'; 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> ); };
Raw Link
A stylized link component for displaying links.
Usage
Props
import { RawLink } from "@/ui/navigation/link/components/RawLink"; 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> ); };
Rounded Link
A rounded-styled link with a Chip component for links.
Usage
Props
import { RoundedLink } from "@/ui/navigation/link/components/RoundedLink"; 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> ); };
Social Link
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
Usage
Props
import { SocialLink } from "@/ui/navigation/link/components/SocialLink"; import { BrowserRouter as Router } from "react-router-dom"; export const MyComponent = () => { return ( <Router> <SocialLink type="twitter" href="https://twitter.com/twentycrm" ></SocialLink> </Router> ); };
Noticed something to change?
As an open-source company, we welcome contributions through Github. Help us keep it up-to-date, accurate, and easy to understand by getting involved and sharing your ideas!
