Function createButtonComponent

packages/kumo-figma/src/generators/button.ts:340–551

* Create a single button component

(
  variant: string,
  size: string,
  shape: string,
  disabled: boolean,
  loading: boolean,
  state: string,
)

 * Create a single button component
 */
async function createButtonComponent(
  variant: string,
  size: string,
  shape: string,
  disabled: boolean,
  loading: boolean,
  state: string,
): Promise<ComponentNode> {
  const variantClasses = variantProp.classes[variant] || "";
  const sizeClasses = sizeProp.classes[size] || "";

  // Parse styles from Tailwind classes
  const variantStyles = parseTailwindClasses(variantClasses);
  const sizeStyles = parseTailwindClasses(sizeClasses);

  // Create component
  const component = figma.createComponent();
  component.name =
    "variant=" +
    variant +
    ", size=" +
    size +
    ", shape=" +
    shape +
    ", disabled=" +
    disabled +
    ", loading=" +
    loading +
    ", state=" +
    state;

  const isCompactShape = shape === "square" || shape === "circle";

  // Configure auto-layout
  component.layoutMode = "HORIZONTAL";
  component.primaryAxisAlignItems = "CENTER";
  component.counterAxisAlignItems = "CENTER";

  if (isCompactShape) {
    // Square/circle: fixed size, no padding
    const buttonSize =
      COMPACT_SIZE_MAP_LOCAL[size] || FALLBACK_VALUES.height.base;
    component.primaryAxisSizingMode = "FIXED";
    component.counterAxisSizingMode = "FIXED";
    component.resize(buttonSize, buttonSize);
    component.paddingLeft = 0;
    component.paddingRight = 0;
  } else {
    // Base shape: hug contents with padding
    component.primaryAxisSizingMode = "AUTO";
    component.counterAxisSizingMode = "FIXED";
    component.paddingLeft =
      sizeStyles.paddingX || FALLBACK_VALUES.padding.horizontal;
    component.paddingRight =
      sizeStyles.paddingX || FALLBACK_VALUES.padding.horizontal;
    component.resize(100, sizeStyles.height || FALLBACK_VALUES.height.base);
  }