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 |
|
import { Button } from '@mantine/core'; |
mantine-core/src/Button/Button.tsx |
core/Button.mdx |
|
import { ButtonDemos } from '@mantine/demos';
To use gradient as Button background:
- set
variant
togradient
- set
gradient
to{ from: 'color-from', to: 'color-to', deg: 135 }
, wherecolor-from
andcolor-to
are color fromtheme.colors
deg
is linear gradient deg
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:
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 stateloaderPosition
– Loader position relative to button label, left, right or centerloaderProps
– props spread to Loader component, you can choose loader type, size and any other supported prop
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:
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>
);
}
Button has the following attributes on the root element:
data-disabled
whendisabled
prop istrue
data-loading
whenloading
prop istrue
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' },
}}
/>
);
}
Button is a polymorphic component, you can change root element:
import { Link } from 'react-router-dom';
import { Button } from '@mantine/core';
function Demo() {
return (
<Button component={Link} to="/react-router">
React router link
</Button>
);
}
import Link from 'next/link';
import { Button } from '@mantine/core';
function Demo() {
return (
<Link href="/hello" passHref>
<Button component="a">Next link</Button>
</Link>
);
}
import { useRef } from 'react';
import { Button } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLButtonElement>(null);
return <Button ref={ref} />;
}