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