data attributes

Mantine components use data-* attributes to apply styles. These attributes are used as a modifier to apply styles based on component state. General rule of Mantine components styles – one class with shared styles and any number of data-* attributes as modifiers.

Example of applying styles with data-* attributes:

.root {
  border-top-left-radius: var(--mantine-radius-xl);
  border-bottom-left-radius: var(--mantine-radius-xl);
  padding-left: rem(4px);

  /* The following styles will be applied only when button is disabled */
  &[data-disabled] {
    /* You can use Mantine PostCSS mixins inside data attributes */
    @mixin light {
      border: rem(1px) solid var(--mantine-color-gray-2);
    }

    @mixin dark {
      border: rem(1px) solid var(--mantine-color-dark-4);
    }

    /* You can target child elements that are inside .root[data-disabled] */
    & .section[data-position='left'] {
      opacity: 0.6;
    }
  }
}

.section {
  /* Apply styles only to left section */
  &[data-position='left'] {
    --section-size: calc(var(--button-height) - rem(8px));

    background-color: var(--mantine-color-body);
    color: var(--mantine-color-text);
    height: var(--section-size);
    width: var(--section-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mantine-radius-xl);
  }

  &[data-position='right'] {
    @mixin rtl {
      transform: rotate(180deg);
    }
  }
}

data attributes values

Most of the data-* attributes do not have associated values, they represent boolean state or feature. For example, when disabled prop on Button is set data-disabled attribute is added to the <button /> element:

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

function Demo() {
  return (
    <Button disabled className="my-button">
      Disabled button
    </Button>
  );
}

Will output the following HTML:

<button class="my-button" data-disabled>Disabled button</button>

You can then use this attribute to apply styles to disabled button:

.my-button {
  color: var(--mantine-color-black);

  &[data-disabled] {
    color: var(--mantine-color-gray-5);
  }
}

When disabled prop is not set, then data-disabled attribute is not added to the button:

<button class="my-button">Not disabled button</button>

In some cases, data-* attributes have associated values, for example, Button component section element has an associated data-position attribute which can be left or right. The following example will render two section elements, one with data-position="left" and another with data-position="right":

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

function Demo() {
  return (
    <Button leftSection="L" rightSection="R">
      Label
    </Button>
  );
}

Will output the following HTML:

<button>
  <span class="section" data-position="left">L</span>
  Label
  <span class="section" data-position="right">R</span>
</button>

You can then use this attribute to apply styles to the left and right sections:

.section {
  /* Styles applied to both sections */
  width: 2rem;

  /* Styles applied only to left section */
  &[data-position='left'] {
    background-color: red;
  }

  /* Styles applied only to right section */
  &[data-position='right'] {
    background-color: blue;
  }
}

Components data attributes documentation

Every component that uses data-* attributes has a dedicated section under Styles API tab.

Button component data-* attributes table:

How to read the table:

• selector column – Styles API selector (or multiple selectors) to which data attribute is added
• attribute column – data attribute name
• condition column – condition based on which data attribute is added to the element
• value column – value of the data attribute

Box component mod prop

Box component supports mod prop, which allows adding data attributes to the element. You can use to create custom components with data attributes.

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

<Box mod="data-button" />;
// -> <div data-button />

<Box mod={{ opened: true }} />;
// -> <div data-opened />

<Box mod={{ opened: false }} />;
// -> <div />

<Box mod={['button', { opened: true }]} />;
// -> <div data-button data-opened />

<Box mod={{ orientation: 'horizontal' }} />;
// -> <div data-orientation="horizontal" />