v5.1.5

Default props

You can define default props for every Mantine component by setting theme.components on MantineProvider:

import { MantineProvider, Group, Button, Switch } from '@mantine/core';


function Demo() {
  return (
    <>
      <MantineProvider
        theme={{
          components: {
            Button: {
              defaultProps: {
                size: 'xs',
                color: 'cyan',
              },
            },


            Switch: {
              defaultProps: {
                size: 'xs',
                onLabel: 'ON',
                offLabel: 'OFF',
              },
            },
          },
        }}
      >
        <Group position="center">
          <Button>Within provider</Button>
          <Switch label="Within provider" />
        </Group>
      </MantineProvider>


      <Group position="center" mt="md">
        <Button>Outside of provider</Button>
        <Switch label="Outside of provider" />
      </Group>
    </>
  );
}

Overriding default props

Default props defined on MantineProvider will be overridden with props that you set on component itself:

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


function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            defaultProps: { color: 'red' },
          },
        },
      }}
    >
      <Button>Red color, defined with defaultProps</Button>
      <Button color="cyan">Cyan color, overridden by prop</Button>
    </MantineProvider>
  );
}

Usage with TypeScript

MantineProvider uses Record<string, any> type for default props types to improve TypeScript performance. If you need more strict type checks or want to have IDE autocomplete, you should define default props separately:

import { MantineProvider, ButtonProps, SwitchProps } from '@mantine/core';


const ButtonDefaultProps: Partial<ButtonProps> = {
  size: 'xs',
  color: 'cyan',
};


const SwitchDefaultProps: Partial<SwitchProps> = {
  size: 'xs',
  onLabel: 'ON',
  offLabel: 'OFF',
};


function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: { defaultProps: ButtonDefaultProps },
          Switch: { defaultProps: SwitchDefaultProps },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}
Download more icon variants from https://tabler-icons.io/i/arrow-left
Go back
Typography – Theming
Up next
Theme functions – Theming
Download more icon variants from https://tabler-icons.io/i/arrow-right
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter