Mantine components use data-* attributes to apply styles. These attributes are used as modifiers to apply styles based on component state. The general rule of Mantine component styles: one class with shared styles and any number of data-* attributes as modifiers.
Example of applying styles with data-* attributes:
Most of the data-* attributes do not have associated values. They represent boolean state or a feature. For example, when the disabled prop on Button is set, the data-disabled attribute is added to the <button /> element:
Will output the following HTML:
You can then use this attribute to apply styles to the disabled button:
When the disabled prop is not set, the data-disabled attribute is not added to the button:
In some cases, data-* attributes have associated values. For example, a Button component's 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" :
You can then use this attribute to apply styles to the left and right sections:
Every component that uses data-* attributes has a dedicated section under the Styles API tab.
The Button component data-* attributes table:
How to read the table:
All components support the mod prop, which allows adding data attributes to the root element. CamelCase keys are converted to kebab-case. If a key starts with data- , the prefix is not duplicated.
Examples of using mod prop: