Anchor

Display links with theme styles
Import

Usage

Anchor is a wrapper around Text component with component prop set to a by default:

<Anchor href="https://mantine.dev/" target="_blank">Mantine docs</Anchor>

Usage with react-router and other libraries

You can use Anchor with react-router Link component and other similar components by setting component prop:

import { Link } from 'react-router-dom';
import { Anchor } from '@mantine/core';
function Demo() {
return (
<Anchor component={Link} to="/react-router">
React router link
</Anchor>
);
}

Usage with Next Link

Next Link component requires ref prop usage, however all Mantine components use elementRef, to make Anchor and other similar components work with Next Link, create wrapper component in your components folder:

// This component can be reused in every Mantine component which supports component pass through
import React, { forwardRef } from 'react';
import Link from 'next/link';
export const NextLink = forwardRef(
(
{ href, ...others }: React.ComponentPropsWithoutRef<typeof Link>,
ref: React.ForwardedRef<HTMLAnchorElement>
) => (
<Link href={href}>
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a {...others} ref={ref} />
</Link>
)
);

And then pass it to Button or other component:

<Anchor component={NextLink} href="/hello">
Next Link
</Anchor>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback