Modifier types or "mods" is a way to alter the appearance of a component by passing props matching the defined mods when rendered.

Most basic modifier is the boolean mod.

const Badge = bemed({
    name: "Badge",
    mods: {
        important: true,
    },
});

It just adds the Badge--important class when important is passed as the prop

<Badge important />
// =>
<button class="Badge Badge--important" />

When a string is passed to the mod definition

const Badge = bemed({
    name: "Badge",
    mods: {
        important: "really-important",
    },
});

It will be passed as is when the prop is added

<Button important />
// =>
<button class="Badge really-important" />

When the mod value is array all the class names will be applied from it. This can be usefull when working with utility CSS Frameworks such as Tailwind CSS.

const Badge = bemed({
    name: "Badge",
    mods: {
        important: [
            "border-red-600",
            "border-solid",
            "border-8"
        ]
    },
});

CSS mod is like the boolean mod but the given CSS is also injected when it's used

import { css } from "react-bemed/css";
const Badge = bemed({
    name: "Badge",
    mods: {
        important: css`
            box-shadow: 0px 0px 30px 10px purple;
        `,
    },
});

Enum mods should be used when only one mod value makes sense at once

const Badge = bemed({
    name: "Badge",
    mods: {
        prize: {
            gold: css`
                color: gold;
            `,
            silver: css`
                color: silver;
            `,
            bronze: css`
                color: bronze;
            `,
        },
    },
});

<Badge prize="gold" />
// ->
<div className="Badge Badge--gold" />

Values of the enum definitions can be any other mod types (boolean, string, string array, or css). In TypeScript the type of the prize prop will be optional union of the mod string literals "gold" | "silver" | "bronze".

A default can be provided when the prop is not present

const Badge = bemed({
    name: "Badge",
    mods: {
        prize: {
            gold: css`
                color: gold;
            `,
            silver: css`
                color: silver;
            `,
            bronze: css`
                color: bronze;
            `,
        },
    },
    defaultMods: {
        prize: "bronze",
    },
});

<Badge />
// ->
<div className="Badge Badge--bronze" />