import { ActionIconDemos, StylesDemos, ThemingDemos, } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.VariantsAndSizes);

Variants and sizes

Adding custom variants

Most Mantine components support the variant prop. It can be used in CSS variables resolver, and it is also exposed as a data-variant="{value}" attribute on the root element of the component. The easiest way to add custom variants is to add styles that use [data-variant="{value}"].

Example of adding a new variant to the Input component:

• underline variant styles are added
• filled variant is the default variant – you do not need to define any additional styles for it

Note that you can add custom variants to every Mantine component that supports the Styles API, even if there are no variants defined on the library side.

Overriding existing variants styles

Apart from adding new variants, you can also override existing ones, for example, you can change the filled variant of the Input component with .input[data-variant="filled"] selector.

Custom variants types

You can define types for custom variants by creating a mantine.d.ts file in your project and extending the {x}Props interface with the new variant type.

Example of adding a custom variant type to the Button component:

import { ButtonVariant, MantineSize } from '@mantine/core';

type ExtendedButtonVariant = ButtonVariant | 'contrast' | 'radial-gradient';

declare module '@mantine/core' {
  export interface ButtonProps {
    variant?: ExtendedButtonVariant;
  }
}

variantColorResolver

Button, Badge, ActionIcon and other components support custom variants with variantColorResolver – it supports both changing colors and adding new variants. Note that theme.variantColorResolver is responsible only for colors. If you need to change other properties, use the data-variant attribute.

Sizes with components CSS variables

You can add custom sizes to any component that supports the size prop by providing a custom CSS variables resolver. Usually this is done in theme.components:

Sizes with data-size attribute

Every component that supports the size prop exposes it as a data-size="{value}" attribute on the root element. You can use it to add custom sizes:

Sizes with static CSS variables

Mantine component sizes are defined with CSS variables (usually on the root element). For example, the ActionIcon component has the following CSS variables:

.root {
  --ai-size-xs: 18px;
  --ai-size-sm: 22px;
  --ai-size-md: 28px;
  --ai-size-lg: 34px;
  --ai-size-xl: 44px;
}

You can override these values with the Styles API or add new size values:

Note that some components have more than one CSS variable for size. For example, the Button component has the following CSS variables:

.root {
  --button-height-xs: 30px;
  --button-height-sm: 36px;
  --button-height-md: 42px;
  --button-height-lg: 50px;
  --button-height-xl: 60px;

  --button-height-compact-xs: 22px;
  --button-height-compact-sm: 26px;
  --button-height-compact-md: 30px;
  --button-height-compact-lg: 34px;
  --button-height-compact-xl: 40px;

  --button-padding-x-xs: 14px;
  --button-padding-x-sm: 18px;
  --button-padding-x-md: 22px;
  --button-padding-x-lg: 26px;
  --button-padding-x-xl: 32px;

  --button-padding-x-compact-xs: 7px;
  --button-padding-x-compact-sm: 8px;
  --button-padding-x-compact-md: 10px;
  --button-padding-x-compact-lg: 12px;
  --button-padding-x-compact-xl: 14px;
}

Usually, it is more convenient to use the data-size attribute or vars on the theme to customize sizes in this case.