Button.styles.css

:root {
  --padding-1: 0.25rem;
  --padding-2: 0.5rem;
  --padding-3: 0.75rem;
  --padding-4: 0.75rem;
}

.button {
  padding: var(--padding-1);
  border: none;
  color: white;
  background-color: var(--btn-color, CornflowerBlue);
}

.button--red {
  --btn-color: FireBrick;
}

.button--green {
  --btn-color: ForestGreen;
}


.root {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 0;
  font: var(--btn-font);
  color: var(--btn-fg-color);
  background: var(--btn-bg-color);
  padding: var(--btn-label-padding);
}

.root:hover {
  opacity: 50%;
}

.root__s {
  --btn-font: var(--font-s);
  --btn-label-padding: var(--spacing-s) var(--spacing-m);
}
.root__m {
  --btn-font: var(--font-m);
  --btn-label-padding: var(--spacing-m) var(--spacing-l);
}
.root__primary {
  --btn-fg-color: var(--complement-color);
  --btn-bg-color: var(--primary-color);
}
.root__secondary {
  --btn-fg-color: var(--secondary-complement-color);
  --btn-bg-color: var(--secondary-color);
}

ButtonComponent.tsx

import React from 'react'
import classes from './button.module.css'
import { clsx } from 'clsx'

interface ButtonProps extends HTMLDivElement {
  type: 'primary' | 'secondary'
  size: 's' | 'm' | 'l'
}

export const ButtonCSSModules = ({ className, type, size = 'm', ...rest }: ButtonProps) => {
  const buttonClass = clsx(className, classes.root, {
    [classes.root__primary]: type === 'primary',
    [classes.root__secondary]: type === 'secondary',
    [classes.root__size_s]: size === 's',
    [classes.root__size_m]: size === 'm',
  })

  return <button className={buttonClass} {...rest} />
}


export const Button = ({ className, type, size = 'm', ...rest }: ButtonProps) => {
  const buttonClass = clsx(className, 'button', {
    [classes.root__primary]: type === 'primary',
    [classes.root__secondary]: type === 'secondary',
    [classes.root__size_s]: size === 's',
    [classes.root__size_m]: size === 'm',
  })

  return <button className={buttonClass} {...rest} />
}