Button case study

case study: Button implementation

The Button source code includes the TypeScript file (Button.tsx) and the CSS module stylesheet (Button.module.css).

HTML structure and inner elements

There are several elements:

• the root <button> is the top level element.
• the loader <span> is an intermediate container for a loader.
• the inner <span> is an intermediate container for label and sections
• a section is a container for a side icon.
• the label hosts the button's text.

<button {/* root */}>
    <span {/* 1.0 loader */} />
    <span  {/* 2.0 inner */}>
        <span {/* 2.1 section  */}>
            <svg /> {/* icon */}
        </span>
        <span {/* 2.2 label  */}>
          {/* text */}
      </span>
    </span>
</button>

Mantine adds its internal classes (e.g. m-77c9d27d) and the non-implemented classes (e.g. mantine-Button-root) to inner-elements:

<button class="m-77c9d27d mantine-Button-root">
    <span class="m-80f1301b mantine-Button-inner">
        <span class="m-811560b9 mantine-Button-label">Save</span>
    </span>
</button>

Mantine adds component agnostic classes, such as mantine-active and mantine-focus-auto. They are placed preemptively, and their style trigger on specific states. For example, mantine-active activates its style on the active state:

mantine-active:active {
    transform: translateY(calc(0.0625rem));
}

Mantine also adds data-attribute for styling purpose, such as data-centered="true".

.m_a3c6e060[data-centered] {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS module source code

The stylesheet targets inner-elements with classes of the same name. For example:

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
}

The .tsx file imports the classes object and plugs it to Button.classes.

style shipped on npm

The style shipped on npm has been processed by PostCSS. It doesn't use CSS nesting.

Mantine gathers all CSS file into a single 232kb stylesheet. Mantine also provides smaller stylesheets, that focus on one or more components.