modus-button-group-usage-react

Modus Button Group Usage

Critical patterns for using ModusButton components inside ModusButtonGroup.

The Problem

When ModusButton has default values for variant and color, these explicit values override the ModusButtonGroup's settings. This causes all buttons to look the same regardless of the group's variant prop.

Root Cause

The modus-wc-button-group web component uses setAttribute() to apply its variant and color to child buttons after they load. If React buttons have explicit defaults, they override the group's settings.

Correct Pattern

ModusButton Component

Do NOT set defaults for variant or color in the ModusButton wrapper:

// CORRECT - No defaults, allows inheritance from button group
export default function ModusButton({
  color, // undefined by default
  variant, // undefined by default
  size = "md",
  // ...other props
}: ModusButtonProps) {
  return (
    <ModusWcButton
      {...(color && { color })} // Only pass if defined
      {...(variant && { variant })} // Only pass if defined
      size={size}
      // ...other props
    >
      {children}
    </ModusWcButton>
  );
}

// WRONG - Defaults override button group settings
export default function ModusButton({
  color = "primary", // BAD: Will override group's color
  variant = "filled", // BAD: Will override group's variant
  // ...
}: ModusButtonProps) {
  // ...
}

Using ModusButton Standalone

When using ModusButton outside a button group, explicitly set the props you need:

// Standalone button - explicitly set variant and color
<ModusButton variant="filled" color="primary">
  Click Me
</ModusButton>

Using ModusButton in a Button Group

When inside a ModusButtonGroup, do NOT set variant/color on individual buttons:

// CORRECT - Group controls all button styling
<ModusButtonGroup variant="outlined" color="primary">
  <ModusButton>Button 1</ModusButton>
  <ModusButton>Button 2</ModusButton>
  <ModusButton>Button 3</ModusButton>
</ModusButtonGroup>

// WRONG - Individual button props override group settings
<ModusButtonGroup variant="outlined" color="primary">
  <ModusButton variant="filled">Button 1</ModusButton>  // BAD
  <ModusButton color="danger">Button 2</ModusButton>    // BAD
</ModusButtonGroup>