react mantine a href link example

React Mantine a href link Example

updated 09/03/23 By frontendshape

In this tutorial, we will see how to use a href link in react mantine core. We will create a href link, a href link button, and a href link button with icon using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13


React Mantine a href link Example

1. react mantine a href link open new tab after click using Anchor component.

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

export default function App() {
  return (
    <>
      <Anchor href="https://mantine.dev/core/anchor/" target="_blank">
        click here to open link in new tab 
      </Anchor>
    </>
  );
}
react mantine  a href link with anchor component

react mantine a href link with anchor component

2. react mantine a href link colors with color props using Anchor component.

import { Anchor, Container, Flex } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container mt={100}>
        <Flex gap="md" direction="column">
          <Anchor
            href="https://mantine.dev/core/anchor/"
            target="_blank"
            color="green"
          >
            a link green color
          </Anchor>
          <Anchor
            href="https://mantine.dev/core/anchor/"
            target="_blank"
            color="red"
          >
            a link red color
          </Anchor>
          <Anchor
            href="https://mantine.dev/core/anchor/"
            target="_blank"
            color="yellow"
          >
            a link yellow color
          </Anchor>
          <Anchor
            href="https://mantine.dev/core/anchor/"
            target="_blank"
            color="indigo"
          >
            a link indigo color
          </Anchor>
        </Flex>
      </Container>
    </>
  );
}
mantine  a href link colors

mantine a href link colors


3. react mantine a href link with button.

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

export default function App() {
  return (
    <>
      <Button
        component="a"
        href="https://mantine.dev/core/anchor/"
        target="_blank"
      >
        Open link
      </Button>
    </>
  );
}
react mantine a href link with button

react mantine a href link with button


4. react mantine a href link button with icons.

Before using icon you need to install @tabler/icons.

Run below command to install @tabler/icons.

npm install @tabler/icons-react 

Use @tabler/icons in react mantine link button with icons.

import {  Button, Container } from '@mantine/core';
import { IconExternalLink } from '@tabler/icons-react';

export default function App() {
  return (
    <>
      <Container mt={100}>
        <Button
          component="a"
          href="https://mantine.dev/core/anchor/"
          variant="outline"
          leftIcon={<IconExternalLink size={14} />}
        >
          Open in new tab
        </Button>
      </Container>
    </>
  );
}
react mantine a href link button with icons

react mantine a href link button with icons