Button.mdx

group	package	title	order	polymorphic	slug	category	description	componentPrefix	props	import	source	docs	styles
mantine-core	@mantine/core	Button	1	true	/core/button/	buttons	Render button or link with button styles from mantine theme	Button	Button ButtonGroup	import { Button } from '@mantine/core';	mantine-core/src/Button/Button.tsx	core/Button.mdx	Button

import { ButtonDemos } from '@mantine/demos';

Usage

Variants

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

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:

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, left, right or center
• loaderProps – props spread to Loader component, you can choose loader type, size and any other supported prop

Styles API

Compact

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:

Button.Group

Note that you cannot wrap child Button components with any additional elements:

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button.Group>
      <div>
        <Button>This will not work</Button>
      </div>
      <Button>Buttons will have incorrect borders</Button>
    </Button.Group>
  );
}

If you want to use Tooltip, Popover or other overlay component, it is required to set withinPortal prop:

import { Button, Tooltip } from '@mantine/core';

function Demo() {
  return (
    <Button.Group>
      <Tooltip label="Working as expected" withinPortal>
        <Button>With Tooltip</Button>
      </Tooltip>
      <Button>Regular button</Button>
    </Button.Group>
  );
}

data- attributes

Button has the following attributes on the root element:

• data-disabled when disabled prop is true
• data-loading when loading prop is true

You can customize disabled and loading styles with these attributes:

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button
      sx={{
        '&[data-disabled]': { opacity: 0.4 },
        '&[data-loading]': { backgroundColor: 'red' },
      }}
    />
  );
}

Polymorphic component

Button is a polymorphic component, you can change root element:

Usage with react-router

import { Link } from 'react-router-dom';
import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button component={Link} to="/react-router">
      React router link
    </Button>
  );
}

Usage with Next.js

import Link from 'next/link';
import { Button } from '@mantine/core';

function Demo() {
  return (
    <Link href="/hello" passHref>
      <Button component="a">Next link</Button>
    </Link>
  );
}

Get ref

import { useRef } from 'react';
import { Button } from '@mantine/core';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <Button ref={ref} />;
}