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
<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
<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: 'grape', to: 'pink', deg: 35 }}>Grape pink</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
<Button leftIcon={<DatabaseIcon />} 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
<Button leftIcon={<DatabaseIcon size={14} />}>
{loading ? 'Connecting' : 'Connect'} to database
</Button>

Customize

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

<Button
component="a"
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/mantinedev"
leftIcon={<TwitterLogoIcon width={18} height={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

<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:

<div style={{ width: 200 }}>
<Button variant="filled" fullWidth>
Full width button
</Button>
</div>
<div style={{ width: 120 }}>
<Button variant="filled" fullWidth>
Button with overflow
</Button>
</div>

Change root element

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

<Button
component="a"
href="https://mantine.dev"
target="_blank"
variant="outline"
leftIcon={<ExternalLinkIcon />}
>
Mantine docs
</Button>

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:

// With element
<Button<'a'>
component="a"
onClick={(event) => console.log(event)}
ref={(node) => {
window.myRef = node;
}}
/>
// With component
<Button<typeof Link>
component={Link}
onClick={(event) => console.log(event)}
ref={(node) => {
window.myRef = node;
}}
/>

Get button ref

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

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 } 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>
);
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback