Button

Render button or link with button styles from mantine theme

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Variant

Color

Radius

Size

Disabled

Compact

Uppercase

Children

<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

Left

Right

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

Follow on Twitter

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

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:

Mantine docs

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

Go back

Autocomplete – @mantine/core

Up next

Checkbox – @mantine/core

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter