Anchor

Usage

Anchor is a wrapper around Text component with component prop set to a by default. It supports the same props as Text component.

import { Anchor } from '@mantine/core';

function Demo() {
  return (
    <Anchor href="https://mantine.dev/" target="_blank">
      Mantine docs
    </Anchor>
  );
}

Usage with react-router and other libraries

To use Anchor with react-router Link component and other similar components set 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>
  );
}