Button

Render button or link with button styles from mantine theme
Import

Usage

Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { Button } from '@mantine/core';
function Demo() {
return (
<Button>
Settings
</Button>
);
}

Variants

Button supports the following variants: default, subtle, white, gradient, filled, light and outline:

Default Button color is theme.primaryColor, to change color and variant pass color and variant props:

<Button color="red" /> // filled button with red color
<Button variant="outline" /> // outline button with theme.primaryColor color

Gradient variant

To use gradient as Button background:

  • set variant to gradient
  • set gradient to { from: 'color-from', to: 'color-to', deg: 135 }, where
    • color-from and color-to are color from theme.colors
    • deg is linear gradient deg
import { Button } from '@mantine/core';
function Demo() {
return (
<>
<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>
</>
);
}

White variant

White is a variant in which button background color is always white (both in light and dark theme) and color is controlled with color prop:

Color
import { Button } from '@mantine/core';
import { Database } from 'tabler-icons-react';
function Demo() {
return (
<Button leftIcon={<Database />} variant="white">
Connect to database
</Button>
);
}

Loading state

Button supports loading state. In this state Loader component replaces left or right icon, button becomes disabled and white or dark overlay is added.

You can control loading state and Loader component with following props:

  • loading – enable loading state
  • loaderPosition – Loader position relative to button label, either right or left
  • loaderProps – props spread to Loader component, you can choose loader type, size and any other supported prop
LoaderPosition
import { Database } from 'tabler-icons-react';
import { Button } from '@mantine/core';
function Demo() {
return (
<Button leftIcon={<Database size={14} />}>
Connect to database
</Button>
);
}

Customize

You can change styles of any element in button component with Styles API to match your design requirements:

import { Button } from '@mantine/core';
import { BrandTwitter } from 'tabler-icons-react';
function Demo() {
return (
<Button
component="a"
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/mantinedev"
leftIcon={<BrandTwitter size={18} />}
styles={(theme) => ({
root: {
backgroundColor: '#00acee',
border: 0,
height: 42,
paddingLeft: 20,
paddingRight: 20,
'&:hover': {
backgroundColor: theme.fn.darken('#00acee', 0.05),
},
},
leftIcon: {
marginRight: 15,
},
})}
>
Follow on Twitter
</Button>
);
}

Size and radius

Control button font-size, height and padding with size and border-radius with radius props. Both props have predefined values: xs, sm, md, lg, xl. Alternatively, you can use a number to set radius in px:

<Button radius="lg" /> // -> theme predefined large radius
<Button radius={10} /> // -> { borderRadius: '10px' }
<Button size="sm" /> // -> predefined small size

Compact

import { Button } from '@mantine/core';
function Demo() {
return <Button compact>My compact button</Button>;
}

Full width and overflow

Button can take full width of container if you set fullWidth prop. If button is too large for its container, overflow content will be hidden:

import { Button } from '@mantine/core';
function Demo() {
return (
<>
<div style={{ width: 200 }}>
<Button fullWidth variant="outline">
Full width button
</Button>
</div>
<div style={{ width: 140 }}>
<Button fullWidth variant="outline">
Button with overflow
</Button>
</div>
</>
);
}

Change root element

You can use Button component both as button and a elements:

import { Button } from '@mantine/core';
import { ExternalLink } from 'tabler-icons-react';
function Demo() {
return (
<Button component="a" href="#" variant="outline" leftIcon={<ExternalLink size={14} />}>
Open in new tab
</Button>
);
}

Unstyled button

To create custom buttons not related to Button component, use UnstyledButton component, it renders regular button without default browser styles and with Mantine focus styles:

import { UnstyledButton, Group, Avatar, Text } from '@mantine/core';
function Demo() {
return (
<UnstyledButton onClick={() => console.log('try focusing button with tab')}>
<Group>
<Avatar size={40} color="blue">BH</Avatar>
<div>
<Text>Bob Handsome</Text>
<Text size="xs" color="gray">bob@handsome.inc</Text>
</div>
</Group>
</UnstyledButton>
);
}

Usage with react-router and other libraries

You can use Button component with react-router-dom or other similar libraries by passing Link as component to Button:

import { Link } from 'react-router-dom';
import { Button } from '@mantine/core';
function Demo() {
return (
<Button component={Link} to="/react-router">
React router link
</Button>
);
}

Provide type to use custom element with TypeScript:

import { Button } from '@mantine/core';
import { Link } from 'react-router-dom';
function Demo() {
return (
<>
<Button<'a'> component="a" href="#" />
<Button<typeof Link> component={Link} to="/hello" />
</>
);
}

Get button ref

import { useRef } from 'react';
import { Button } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLButtonElement>();
return <Button ref={ref} />;
}