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

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

Left

Right

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:

Follow on Twitter

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

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:

Open in new tab

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

Go back

Autocomplete – @mantine/core

Up next

Checkbox – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter