Button

Render button or link with button styles from mantine theme

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Variants

Button has 4 variants: filled, light, outline and link:

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
<Button variant="link" color="indigo" /> // indigo link 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 number to set radius in px:

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

Predefined sizes from xs to xl:

Theme radius from xs to xl:

You can get predefined badge heights by importing BUTTON_SIZES:

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

Size	Button height
xs	22px
sm	26px
md	32px
lg	36px
xl	44px

Full width and overflow

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

<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 React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@mantine/core';

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

Get element ref

You can get root element ref with elementRef prop:

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

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

TypeScript

You need to pass additional types to use custom component with TypeScript in case you need full type coverage for events and elementRef:

<Button<'button', HTMLButtonElement>
  component="button"
  onClick={(event) => console.log(event)}
  elementRef={(node) => {
    window.myRef = node;
  }}
/>

<Button<typeof Link, HTMLAnchorElement>
  component={Link}
  onClick={(event) => console.log(event)}
  elementRef={(node) => {
    window.myRef = node;
  }}
/>