react mantine ui button example

React Mantine UI Button Example

updated 09/03/23 By frontendshape

In this tutorial, we will create buttons using react mantine core ui. mantine 5 button, mantine button with icons, react mantine gradient variant & loading button example with react mantine 5.9.4v.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13


React Mantine Core UI Button Example

1. react mantine simple colors button.

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

export default function App() {
  return (
    <>
      <Button>Default</Button>
      <Button color="gray">Button</Button>
      <Button color="green">Button</Button>
      <Button color="red">Button</Button>
      <Button color="violet">Button</Button>
      <Button color="yellow">Button</Button>
    </>
  );
}
react mantine simple button

react mantine simple button

2. react mantine outline button.

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

export default function App() {
  return (
    <>
      <Button variant="outline">Default</Button>
      <Button color="gray" variant="outline">
        Button
      </Button>
      <Button color="green" variant="outline">
        Button
      </Button>
      <Button color="red" variant="outline">
        Button
      </Button>
      <Button color="violet" variant="outline">
        Button
      </Button>
      <Button color="yellow" variant="outline">
        Button
      </Button>
    </>
  );
}
react mantine outline button list

react mantine outline button list

3. react mantine ui gradient button using gradient variant.

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

export default function App() {
  return (
    <>
      <Button variant="gradient">Default</Button>
      <Button variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>
        Indigo cyan
      </Button>
      <Button
        variant="gradient"
        gradient={{ from: 'teal', to: 'lime', deg: 105 }}
      >
        Lime green
      </Button>
      <Button
        variant="gradient"
        gradient={{ from: 'teal', to: 'blue', deg: 60 }}
      >
        Teal blue
      </Button>
      <Button variant="gradient" gradient={{ from: 'orange', to: 'red' }}>
        Orange red
      </Button>
      <Button
        variant="gradient"
        gradient={{ from: '#ed6ea0', to: '#ec8c69', deg: 35 }}
      >
        Peach
      </Button>
    </>
  );
}
react mantine ui gradient button

react mantine ui gradient button


4. react mantine ui 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 ui button.

import { Button } from '@mantine/core';
import { IconAlertCircle, IconDatabase, IconHome } from '@tabler/icons-react';

export default function App() {
  return (
    <>
      <Button variant="gradient" leftIcon={<IconDatabase />}>
        Default
      </Button>
      <Button variant="outline" rightIcon={<IconHome />}>
        Home Icon Button
      </Button>
      <Button color="yellow" leftIcon={<IconAlertCircle />}>
        Warning Button
      </Button>
    </>
  );
}
react mantine button with icon

react mantine button with icon


5. react mantine ui loading button with loading position right left and center.

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

export default function App() {
  return (
    <>
      <Button color="gray" variant="outline" loading>
        Button
      </Button>
      <Button variant="gradient" loaderPosition="right" loading>
        Default
      </Button>

      <Button color="green" variant="outline" loading loaderPosition="center">
        Button
      </Button>
    </>
  );
}
react mantine ui loading button

react mantine ui loading button