Link
A Link
navigates the user to a different url.
Simple Link
import { Link } from "@react-md/core/link/Link";
import { type ReactElement } from "react";
export default function SimpleLinkExample(): ReactElement {
return <Link href="https://react-md.dev">react-md.dev</Link>;
}
Link with Icon
If a link contains an icon, it can be centered vertically by enabling the flex
prop. Just note that links will no longer correctly line wrap while rendered
within paragraphs of text if this is enabled.
import { Link } from "@react-md/core/link/Link";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";
export default function LinkWithIconExample(): ReactElement {
return (
<Link href="#" flex>
<FavoriteIcon />
Favorite
</Link>
);
}
Button Styled Link
To create a link that appears like a button, use the button
styling utility
function.
import { button } from "@react-md/core/button/styles";
import { cssUtils } from "@react-md/core/cssUtils";
import { type ReactElement } from "react";
export default function ButtonStyledLinkExample(): ReactElement {
return (
<a
href="https://react-md.dev"
className={button({
className: cssUtils({
textDecoration: "none",
}),
theme: "primary",
themeType: "outline",
})}
>
Link
</a>
);
}
Third-party Routing Libraries
If your application uses Next.js,
react-router,
@reach/router, or some other framework for
routing, do not use the Link
component from react-md
. Instead, use the
link
styling utility function if the link styles are required.
This example will show how to apply it to Next.js.
import { link } from "@react-md/core/link/styles";
import Link from "next/link.js";
import { type ReactElement } from "react";
export default function ThirdPartyRoutingLibrariesExample(): ReactElement {
return (
<Link
href="https://nextjs.org"
className={link()}
// className={link({
// flex: true,
// className: "",
// })}
>
Next.js
</Link>
);
}