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>
</>
);
}
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>
</>
);
}
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>
</>
);
}
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>
</>
);
}