Remove backwards compatibility

app/components/buttons/Button.tsx

@@ -1,13 +1,11 @@
 import { memo } from "react";
 import type {
-  VariantValue,
   SizeValue,
   ButtonTypeValue,
   ButtonPaletteValue,
   ButtonStateValue,
 } from "../../../lib/propNormalization";
 import {
-  normalizeVariant,
   normalizeSize,
   normalizeButtonType,
   normalizeButtonPalette,
@@ -15,12 +13,6 @@ import {
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  /**
-   * @deprecated Use `type` and `palette` props instead. This prop is maintained for backward compatibility.
-   * Button variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
-  variant?: VariantValue;
   /**
    * Button type (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
@@ -74,7 +66,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 const Button = memo<ButtonProps>(
   ({
     children,
-    variant: variantProp,
     buttonType: typeProp,
     palette: paletteProp,
     size: sizeProp = "xsmall",
@@ -92,51 +83,14 @@ const Button = memo<ButtonProps>(
     ariaLabel,
     ...props
   }) => {
-    // Determine type and palette from either new props or legacy variant prop
+    // Normalize props
-    let buttonType: "filled" | "outline" | "ghost" | "danger";
+    const buttonType = normalizeButtonType(typeProp, "filled");
-    let buttonPalette: "default" | "inverse";
+    const buttonPalette = normalizeButtonPalette(paletteProp, "default");
-
-    if (variantProp) {
-      // Backward compatibility: map old variant to new type/palette
-      const variant = normalizeVariant(variantProp);
-      if (variant === "filled") {
-        buttonType = "filled";
-        buttonPalette = "default";
-      } else if (variant === "filled-inverse") {
-        buttonType = "filled";
-        buttonPalette = "inverse";
-      } else if (variant === "outline") {
-        buttonType = "outline";
-        buttonPalette = "default";
-      } else if (variant === "outline-inverse") {
-        buttonType = "outline";
-        buttonPalette = "inverse";
-      } else if (variant === "ghost") {
-        buttonType = "ghost";
-        buttonPalette = "default";
-      } else if (variant === "ghost-inverse") {
-        buttonType = "ghost";
-        buttonPalette = "inverse";
-      } else if (variant === "danger") {
-        buttonType = "danger";
-        buttonPalette = "default";
-      } else {
-        // danger-inverse
-        buttonType = "danger";
-        buttonPalette = "inverse";
-      }
-    } else {
-      // Use new type/palette props
-      buttonType = normalizeButtonType(typeProp, "filled");
-      buttonPalette = normalizeButtonPalette(paletteProp, "default");
-    }
-
-    // Normalize other props
     const size = normalizeSize(sizeProp);
     // State prop is for Figma alignment - actual state is handled by CSS pseudo-classes
     // We accept it for API alignment but don't use it for styling (CSS handles states)
 
-    // Map type + palette to legacy variant for styling (maintains existing styles)
+    // Map type + palette to variant string for styling (internal use only)
     const getVariantFromTypeAndPalette = (
       type: typeof buttonType,
       palette: typeof buttonPalette,

app/components/cards/RuleCard/RuleCard.view.tsx

@@ -242,7 +242,7 @@ export function RuleCardView({
                   onCustomChipClose={(chipId) => {
                     category.onCustomChipClose?.(category.name, chipId);
                   }}
-                  showAddButton={true}
+                  addButton={true}
                   addButtonText="" // Empty text for icon-only circular button
                   className="w-full"
                 />

app/components/controls/MultiSelect/MultiSelect.container.tsx

@@ -14,8 +14,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     options,
     onChipClick,
     onAddClick,
-    showAddButton: showAddButtonProp,
+    addButton: addButtonProp = true,
-    addButton: addButtonProp,
     addButtonText = "Add organization type",
     formHeader = true,
     onCustomChipConfirm,
@@ -24,8 +23,6 @@ const MultiSelectContainer = memo<MultiSelectProps>(
   }) => {
     const size = normalizeMultiSelectSize(sizeProp);
     const palette = normalizeChipPalette(paletteProp);
-    // Backward compatibility: if addButton is provided, use it; otherwise use showAddButton
-    const showAddButton = addButtonProp !== undefined ? addButtonProp : (showAddButtonProp !== undefined ? showAddButtonProp : true);
 
     return (
       <MultiSelectView
@@ -36,7 +33,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
         options={options}
         onChipClick={onChipClick}
         onAddClick={onAddClick}
-        showAddButton={showAddButton}
+        addButton={addButtonProp}
         addButtonText={addButtonText}
         formHeader={formHeader}
         onCustomChipConfirm={onCustomChipConfirm}

app/components/controls/MultiSelect/MultiSelect.types.ts

@@ -39,10 +39,6 @@ export interface MultiSelectProps {
    * Callback when add button is clicked
    */
   onAddClick?: () => void;
-  /**
-   * Show the add button (backward compatibility - use addButton instead)
-   */
-  showAddButton?: boolean;
   /**
    * Whether to show add button (Figma prop).
    * @default true
@@ -76,7 +72,7 @@ export interface MultiSelectViewProps {
   options: ChipOption[];
   onChipClick?: (chipId: string) => void;
   onAddClick?: () => void;
-  showAddButton: boolean;
+  addButton: boolean;
   addButtonText: string;
   formHeader: boolean;
   onCustomChipConfirm?: (chipId: string, value: string) => void;

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -13,7 +13,7 @@ function MultiSelectView({
   options,
   onChipClick,
   onAddClick,
-  showAddButton,
+  addButton,
   addButtonText,
   formHeader = true,
   onCustomChipConfirm,
@@ -75,7 +75,7 @@ function MultiSelectView({
         ))}
 
         {/* Add button - Circular button with border (not ghost) when no text, ghost style when text provided */}
-        {showAddButton && (
+        {addButton && (
           <button
             type="button"
             aria-label={addButtonText || "Add option"}

app/components/controls/SelectInput/SelectInput.container.tsx

@@ -22,7 +22,6 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
   (
     {
       id,
-      label: labelProp,
       labelText,
       showLabel,
       labelVariant: labelVariantProp,
@@ -46,9 +45,8 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     },
     ref,
   ) => {
-    // Handle backward compatibility: if label is string, use it as labelText
+    // Determine if label should be shown
-    const actualLabelText = labelText || labelProp;
+    const shouldShowLabel = showLabel !== undefined ? showLabel : (labelText !== undefined);
-    const shouldShowLabel = showLabel !== undefined ? showLabel : (actualLabelText !== undefined);
     
     // Normalize state - handle "state5" as disabled
     let normalizedState = externalStateProp;
@@ -211,7 +209,7 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
 
     return (
       <SelectInputView
-        label={shouldShowLabel ? actualLabelText : undefined}
+        label={shouldShowLabel ? labelText : undefined}
         placeholder={placeholder}
         state={actualState}
         disabled={disabled}

app/components/controls/SelectInput/SelectInput.types.ts

@@ -13,17 +13,12 @@ export type SelectInputSizeValue = "small" | "medium" | "large" | "Small" | "Med
 export interface SelectInputProps {
   id?: string;
   /**
-   * Label text (backward compatibility - if provided, label is shown).
+   * Label text (Figma prop).
-   * For Figma alignment, use `labelText` prop instead.
-   */
-  label?: string;
-  /**
-   * Label text (Figma prop - use this for new code).
    */
   labelText?: string;
   /**
    * Whether to show label above input (Figma prop).
-   * If `label` or `labelText` is provided, defaults to true.
+   * If `labelText` is provided, defaults to true.
    * @default true
    */
   showLabel?: boolean;

app/components/controls/Switch/Switch.container.tsx

@@ -8,23 +8,16 @@ import { normalizeState } from "../../../../lib/propNormalization";
 const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     const {
-      checked: checkedProp,
+      propSwitch = false,
-      propSwitch: propSwitchProp,
       onChange,
       onFocus,
       onBlur,
       state: stateProp = "default",
-      label: labelProp,
+      text,
-      text: textProp,
       className = "",
       ...rest
     } = props;
     
-    // Backward compatibility: use propSwitch if provided, otherwise use checked
-    const checked = propSwitchProp !== undefined ? propSwitchProp : (checkedProp !== undefined ? checkedProp : false);
-    // Backward compatibility: use text if provided, otherwise use label
-    const label = textProp !== undefined ? textProp : labelProp;
-    
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const state = normalizeState(stateProp);
 
@@ -69,14 +62,14 @@ const SwitchContainer = memo(
       [onBlur],
     );
 
-    // Switch track styles based on checked state
+    // Switch track styles based on propSwitch state
     const getTrackStyles = useCallback(() => {
-      return checked
+      return propSwitch
         ? "bg-[var(--color-surface-inverse-tertiary)]"
         : "bg-[var(--color-surface-default-tertiary)]";
-    }, [checked]);
+    }, [propSwitch]);
 
-    // Switch thumb styles based on checked state
+    // Switch thumb styles based on propSwitch state
     const getThumbStyles = useCallback(() => {
       return "bg-[var(--color-gray-000)]";
     }, []);
@@ -118,7 +111,7 @@ const SwitchContainer = memo(
       duration-200
       flex
       items-center
-      ${checked ? "justify-end" : "justify-start"}
+      ${propSwitch ? "justify-end" : "justify-start"}
       p-[2px]
     `
       .trim()
@@ -151,9 +144,9 @@ const SwitchContainer = memo(
       <SwitchView
         ref={ref}
         switchId={switchId}
-        checked={checked}
+        propSwitch={propSwitch}
         state={state}
-        label={label}
+        text={text}
         className={className}
         switchClasses={switchClasses}
         trackClasses={trackClasses}

app/components/controls/Switch/Switch.types.ts

@@ -4,10 +4,6 @@ export interface SwitchProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   "onChange"
 > {
-  /**
-   * Whether the switch is checked (backward compatibility - use propSwitch instead).
-   */
-  checked?: boolean;
   /**
    * Whether the switch is checked (Figma prop).
    * @default false
@@ -25,10 +21,6 @@ export interface SwitchProps extends Omit<
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue;
-  /**
-   * Label text (backward compatibility - use text instead).
-   */
-  label?: string;
   /**
    * Label text (Figma prop).
    */
@@ -38,9 +30,9 @@ export interface SwitchProps extends Omit<
 
 export interface SwitchViewProps {
   switchId: string;
-  checked: boolean;
+  propSwitch: boolean;
   state: "default" | "hover" | "focus" | "selected";
-  label?: string;
+  text?: string;
   className: string;
   switchClasses: string;
   trackClasses: string;

app/components/controls/Switch/Switch.view.tsx

@@ -5,8 +5,8 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
   (
     {
       switchId,
-      checked,
+      propSwitch,
-      label,
+      text,
       switchClasses,
       trackClasses,
       thumbClasses,
@@ -26,8 +26,8 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
           id={switchId}
           type="button"
           role="switch"
-          aria-checked={checked}
+          aria-checked={propSwitch}
-          aria-label={label || "Toggle switch"}
+          aria-label={text || "Toggle switch"}
           onClick={onClick}
           onKeyDown={onKeyDown}
           onFocus={onFocus}
@@ -39,7 +39,7 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
             <div className={thumbClasses} />
           </div>
         </button>
-        {label && <span className={labelClasses}>{label}</span>}
+        {text && <span className={labelClasses}>{text}</span>}
       </div>
     );
   },

app/components/modals/Alert/Alert.view.tsx

@@ -55,7 +55,8 @@ export function AlertView({
         )}
       </div>
       <Button
-        variant="ghost"
+        buttonType="ghost"
+        palette="default"
         size="large"
         onClick={onClose}
         ariaLabel="Close alert"

app/components/navigation/TopNav/TopNav.container.tsx

@@ -196,13 +196,15 @@ const TopNavContainer = memo<TopNavProps>(
       containerSize: "small" | "medium" | "large" | "xlarge",
       avatarSize: "small" | "medium" | "large" | "xlarge",
     ) => {
-      // Use ghost variant when folderTop is true, standard otherwise
+      // Use ghost type when folderTop is true, filled (default) otherwise
-      const variant = folderTop ? "ghost" : undefined;
+      const buttonType = folderTop ? "ghost" : "filled";
+      const palette = "default";
 
       return (
         <Button
           size={buttonSize}
-          variant={variant}
+          buttonType={buttonType}
+          palette={palette}
           ariaLabel={t("ariaLabels.createNewRule")}
         >
           {renderAvatarGroup(containerSize, avatarSize)}

app/components/sections/AskOrganizer/AskOrganizer.view.tsx

@@ -45,7 +45,8 @@ function AskOrganizerView({
           <Button
             href={buttonHref}
             size="large"
-            variant={variant === "inverse" ? "filled-inverse" : "filled"}
+            buttonType="filled"
+            palette={variant === "inverse" ? "inverse" : "default"}
             className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
             onClick={onContactClick}
             ariaLabel={ariaLabel}

app/components/sections/NumberedCards/NumberedCards.view.tsx

@@ -49,13 +49,13 @@ function NumberedCardsView({
             <div className="text-center sm:text-left lg:text-center">
               {/* Filled button for xsm and sm breakpoints */}
               <div className="block lg:hidden">
-                <Button variant="filled" size="large">
+                <Button buttonType="filled" palette="default" size="large">
                   {t("numberedCards.buttons.createCommunityRule")}
                 </Button>
               </div>
               {/* Outline button for lg and xlg breakpoints */}
               <div className="hidden lg:block">
-                <Button variant="outline" size="large">
+                <Button buttonType="outline" palette="default" size="large">
                   {t("numberedCards.buttons.seeHowItWorks")}
                 </Button>
               </div>

app/components/sections/RuleStack/RuleStack.view.tsx

@@ -157,7 +157,8 @@ export function RuleStackView({
         min-[1024px]:mt-[var(--measures-spacing-1000,40px)]
       ">
         <Button
-          variant="outline"
+          buttonType="outline"
+          palette="default"
           size="large"
         >
           {buttonText}

app/components/type/ContentLockup/ContentLockup.view.tsx

@@ -93,19 +93,19 @@ function ContentLockupView({
         <div className="flex justify-start">
           {/* Small button for xsm and sm breakpoints */}
           <div className="block md:hidden">
-            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="small">
+            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="small">
               {ctaText}
             </Button>
           </div>
           {/* Large button for md and lg breakpoints */}
           <div className="hidden md:block xl:hidden">
-            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="large" className={buttonClassName}>
+            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="large" className={buttonClassName}>
               {ctaText}
             </Button>
           </div>
           {/* XLarge button for xl breakpoint */}
           <div className="hidden xl:block">
-            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="xlarge">
+            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="xlarge">
               {ctaText}
             </Button>
           </div>

app/components/utility/ModalFooter/ModalFooter.view.tsx

@@ -38,7 +38,7 @@ export function ModalFooterView({
       {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
-          <Button variant="outline" size="medium" onClick={onBack}>
+          <Button buttonType="outline" palette="default" size="medium" onClick={onBack}>
             {defaultBackText}
           </Button>
         </div>
@@ -55,7 +55,8 @@ export function ModalFooterView({
       {showNextButton && (
         <div className="absolute right-[16px] top-[12px]">
           <Button
-            variant="filled"
+            buttonType="filled"
+            palette="default"
             size="medium"
             onClick={onNext}
             disabled={nextButtonDisabled}

lib/propNormalization.ts

@@ -112,30 +112,6 @@ export type InputStateValue =
   | "Hover"
   | "Focus";
 
-/**
- * Normalize button variant prop values
- */
-export function normalizeVariant(
-  value: string | undefined,
-  defaultValue: "filled" = "filled"
-): "filled" | "filled-inverse" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "danger" | "danger-inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = [
-    "filled",
-    "filled-inverse",
-    "outline",
-    "outline-inverse",
-    "ghost",
-    "ghost-inverse",
-    "danger",
-    "danger-inverse",
-  ];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
 
 /**
  * Normalize button size prop values
@@ -201,27 +177,6 @@ export function normalizeTooltipPosition(
   return defaultValue;
 }
 
-/**
- * Type helper for case-insensitive variant prop
- */
-export type VariantValue =
-  | "filled"
-  | "filled-inverse"
-  | "outline"
-  | "outline-inverse"
-  | "ghost"
-  | "ghost-inverse"
-  | "danger"
-  | "danger-inverse"
-  | "Filled"
-  | "Filled-Inverse"
-  | "Outline"
-  | "Outline-Inverse"
-  | "Ghost"
-  | "Ghost-Inverse"
-  | "Danger"
-  | "Danger-Inverse";
-
 /**
  * Type helper for case-insensitive size prop
  */

stories/buttons/Button.stories.js

@@ -13,19 +13,15 @@ export default {
     },
   },
   argTypes: {
-    variant: {
+    buttonType: {
       control: { type: "select" },
-      options: [
+      options: ["filled", "outline", "ghost", "danger"],
-        "filled",
+      description: "The button type (Figma prop)",
-        "filled-inverse",
+    },
-        "outline",
+    palette: {
-        "outline-inverse",
+      control: { type: "select" },
-        "ghost",
+      options: ["default", "inverse"],
-        "ghost-inverse",
+      description: "The button palette (Figma prop)",
-        "danger",
-        "danger-inverse",
-      ],
-      description: "The visual style variant of the button",
     },
     size: {
       control: { type: "select" },
@@ -59,28 +55,28 @@ export const Variants = {
   render: (_args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <Button {..._args} variant="filled">
+        <Button {..._args} buttonType="filled" palette="default">
           Filled
         </Button>
-        <Button {..._args} variant="filled-inverse">
+        <Button {..._args} buttonType="filled" palette="inverse">
           Filled Inverse
         </Button>
-        <Button {..._args} variant="outline">
+        <Button {..._args} buttonType="outline" palette="default">
           Outline
         </Button>
-        <Button {..._args} variant="outline-inverse">
+        <Button {..._args} buttonType="outline" palette="inverse">
           Outline Inverse
         </Button>
-        <Button {..._args} variant="ghost">
+        <Button {..._args} buttonType="ghost" palette="default">
           Ghost
         </Button>
-        <Button {..._args} variant="ghost-inverse">
+        <Button {..._args} buttonType="ghost" palette="inverse">
           Ghost Inverse
         </Button>
-        <Button {..._args} variant="danger">
+        <Button {..._args} buttonType="danger" palette="default">
           Danger
         </Button>
-        <Button {..._args} variant="danger-inverse">
+        <Button {..._args} buttonType="danger" palette="inverse">
           Danger Inverse
         </Button>
       </div>
@@ -98,7 +94,8 @@ export const Variants = {
 export const Sizes = {
   args: {
     children: "Button",
-    variant: "filled",
+    buttonType: "filled",
+    palette: "default",
   },
   render: (_args) => (
     <div className="space-y-4">
@@ -134,7 +131,8 @@ export const States = {
   args: {
     children: "Button",
     size: "large",
-    variant: "filled",
+    buttonType: "filled",
+    palette: "default",
   },
   render: (_args) => (
     <div className="space-y-4">
@@ -162,19 +160,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Filled Variant</h3>
         <div className="space-x-4">
-          <Button variant="filled" size="xsmall">
+          <Button buttonType="filled" palette="default" size="xsmall">
             XSmall
           </Button>
-          <Button variant="filled" size="small">
+          <Button buttonType="filled" palette="default" size="small">
             Small
           </Button>
-          <Button variant="filled" size="medium">
+          <Button buttonType="filled" palette="default" size="medium">
             Medium
           </Button>
-          <Button variant="filled" size="large">
+          <Button buttonType="filled" palette="default" size="large">
             Large
           </Button>
-          <Button variant="filled" size="xlarge">
+          <Button buttonType="filled" palette="default" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -183,19 +181,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="filled-inverse" size="xsmall">
+          <Button buttonType="filled" palette="inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="filled-inverse" size="small">
+          <Button buttonType="filled" palette="inverse" size="small">
             Small
           </Button>
-          <Button variant="filled-inverse" size="medium">
+          <Button buttonType="filled" palette="inverse" size="medium">
             Medium
           </Button>
-          <Button variant="filled-inverse" size="large">
+          <Button buttonType="filled" palette="inverse" size="large">
             Large
           </Button>
-          <Button variant="filled-inverse" size="xlarge">
+          <Button buttonType="filled" palette="inverse" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -204,19 +202,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Outline Variant</h3>
         <div className="space-x-4">
-          <Button variant="outline" size="xsmall">
+          <Button buttonType="outline" palette="default" size="xsmall">
             XSmall
           </Button>
-          <Button variant="outline" size="small">
+          <Button buttonType="outline" palette="default" size="small">
             Small
           </Button>
-          <Button variant="outline" size="medium">
+          <Button buttonType="outline" palette="default" size="medium">
             Medium
           </Button>
-          <Button variant="outline" size="large">
+          <Button buttonType="outline" palette="default" size="large">
             Large
           </Button>
-          <Button variant="outline" size="xlarge">
+          <Button buttonType="outline" palette="default" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -225,19 +223,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="outline-inverse" size="xsmall">
+          <Button buttonType="outline" palette="inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="outline-inverse" size="small">
+          <Button buttonType="outline" palette="inverse" size="small">
             Small
           </Button>
-          <Button variant="outline-inverse" size="medium">
+          <Button buttonType="outline" palette="inverse" size="medium">
             Medium
           </Button>
-          <Button variant="outline-inverse" size="large">
+          <Button buttonType="outline" palette="inverse" size="large">
             Large
           </Button>
-          <Button variant="outline-inverse" size="xlarge">
+          <Button buttonType="outline" palette="inverse" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -246,19 +244,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Ghost Variant</h3>
         <div className="space-x-4">
-          <Button variant="ghost" size="xsmall">
+          <Button buttonType="ghost" palette="default" size="xsmall">
             XSmall
           </Button>
-          <Button variant="ghost" size="small">
+          <Button buttonType="ghost" palette="default" size="small">
             Small
           </Button>
-          <Button variant="ghost" size="medium">
+          <Button buttonType="ghost" palette="default" size="medium">
             Medium
           </Button>
-          <Button variant="ghost" size="large">
+          <Button buttonType="ghost" palette="default" size="large">
             Large
           </Button>
-          <Button variant="ghost" size="xlarge">
+          <Button buttonType="ghost" palette="default" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -267,19 +265,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="ghost-inverse" size="xsmall">
+          <Button buttonType="ghost" palette="inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="ghost-inverse" size="small">
+          <Button buttonType="ghost" palette="inverse" size="small">
             Small
           </Button>
-          <Button variant="ghost-inverse" size="medium">
+          <Button buttonType="ghost" palette="inverse" size="medium">
             Medium
           </Button>
-          <Button variant="ghost-inverse" size="large">
+          <Button buttonType="ghost" palette="inverse" size="large">
             Large
           </Button>
-          <Button variant="ghost-inverse" size="xlarge">
+          <Button buttonType="ghost" palette="inverse" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -288,19 +286,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Danger Variant</h3>
         <div className="space-x-4">
-          <Button variant="danger" size="xsmall">
+          <Button buttonType="danger" palette="default" size="xsmall">
             XSmall
           </Button>
-          <Button variant="danger" size="small">
+          <Button buttonType="danger" palette="default" size="small">
             Small
           </Button>
-          <Button variant="danger" size="medium">
+          <Button buttonType="danger" palette="default" size="medium">
             Medium
           </Button>
-          <Button variant="danger" size="large">
+          <Button buttonType="danger" palette="default" size="large">
             Large
           </Button>
-          <Button variant="danger" size="xlarge">
+          <Button buttonType="danger" palette="default" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -309,19 +307,19 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
         <div className="space-x-4">
-          <Button variant="danger-inverse" size="xsmall">
+          <Button buttonType="danger" palette="inverse" size="xsmall">
             XSmall
           </Button>
-          <Button variant="danger-inverse" size="small">
+          <Button buttonType="danger" palette="inverse" size="small">
             Small
           </Button>
-          <Button variant="danger-inverse" size="medium">
+          <Button buttonType="danger" palette="inverse" size="medium">
             Medium
           </Button>
-          <Button variant="danger-inverse" size="large">
+          <Button buttonType="danger" palette="inverse" size="large">
             Large
           </Button>
-          <Button variant="danger-inverse" size="xlarge">
+          <Button buttonType="danger" palette="inverse" size="xlarge">
             XLarge
           </Button>
         </div>
@@ -330,28 +328,28 @@ export const AllVariants = {
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
-          <Button variant="filled" size="large" disabled>
+          <Button buttonType="filled" palette="default" size="large" disabled>
             Filled Disabled
           </Button>
-          <Button variant="filled-inverse" size="large" disabled>
+          <Button buttonType="filled" palette="inverse" size="large" disabled>
             Filled Inverse Disabled
           </Button>
-          <Button variant="outline" size="large" disabled>
+          <Button buttonType="outline" palette="default" size="large" disabled>
             Outline Disabled
           </Button>
-          <Button variant="outline-inverse" size="large" disabled>
+          <Button buttonType="outline" palette="inverse" size="large" disabled>
             Outline Inverse Disabled
           </Button>
-          <Button variant="ghost" size="large" disabled>
+          <Button buttonType="ghost" palette="default" size="large" disabled>
             Ghost Disabled
           </Button>
-          <Button variant="ghost-inverse" size="large" disabled>
+          <Button buttonType="ghost" palette="inverse" size="large" disabled>
             Ghost Inverse Disabled
           </Button>
-          <Button variant="danger" size="large" disabled>
+          <Button buttonType="danger" palette="default" size="large" disabled>
             Danger Disabled
           </Button>
-          <Button variant="danger-inverse" size="large" disabled>
+          <Button buttonType="danger" palette="inverse" size="large" disabled>
             Danger Inverse Disabled
           </Button>
         </div>

stories/buttons/Button.visual.stories.js

@@ -22,9 +22,13 @@ export default {
       control: { type: "select" },
       options: ["xsmall", "small", "medium", "large", "xlarge"],
     },
-    variant: {
+    buttonType: {
       control: { type: "select" },
-      options: ["default", "home"],
+      options: ["filled", "outline", "ghost", "danger"],
+    },
+    palette: {
+      control: { type: "select" },
+      options: ["default", "inverse"],
     },
     disabled: {
       control: { type: "boolean" },
@@ -192,7 +196,8 @@ export const XLarge = {
 export const HomeVariant = {
   args: {
     children: "Home Button",
-    variant: "home",
+    buttonType: "filled",
+    palette: "default",
   },
   parameters: {
     docs: {
@@ -268,8 +273,8 @@ export const StateComparison = {
         <Button disabled>Disabled</Button>
       </div>
       <div className="flex flex-wrap gap-4 items-center">
-        <Button variant="home">Home Default</Button>
+        <Button buttonType="filled" palette="default">Home Default</Button>
-        <Button variant="home" disabled>
+        <Button buttonType="filled" palette="default" disabled>
           Home Disabled
         </Button>
       </div>
@@ -336,8 +341,8 @@ export const EdgeCases = {
       <div className="flex flex-wrap gap-4 items-center">
         <Button>Normal</Button>
         <Button disabled>Disabled</Button>
-        <Button variant="home">Home</Button>
+        <Button buttonType="filled" palette="default">Home</Button>
-        <Button variant="home" disabled>
+        <Button buttonType="filled" palette="default" disabled>
           Home Disabled
         </Button>
       </div>

stories/controls/Switch.stories.js

@@ -8,18 +8,18 @@ export default {
     layout: "centered",
   },
   argTypes: {
-    checked: {
+    propSwitch: {
       control: "boolean",
-      description: "Whether the switch is checked (on) or not (off)",
+      description: "Whether the switch is checked (on) or not (off) (Figma prop)",
     },
     state: {
       control: "select",
       options: ["default", "focus"],
       description: "Visual state of the switch",
     },
-    label: {
+    text: {
       control: "text",
-      description: "Label text displayed next to the switch",
+      description: "Label text displayed next to the switch (Figma prop)",
     },
     onChange: {
       action: "changed",
@@ -40,28 +40,28 @@ const Template = (args) => <Switch {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  checked: false,
+  propSwitch: false,
-  label: "Switch label",
+  text: "Switch label",
 };
 
 export const Checked = Template.bind({});
 Checked.args = {
-  checked: true,
+  propSwitch: true,
-  label: "Switch label",
+  text: "Switch label",
 };
 
 export const Focus = Template.bind({});
 Focus.args = {
-  checked: false,
+  propSwitch: false,
   state: "focus",
-  label: "Switch label",
+  text: "Switch label",
 };
 
 export const FocusChecked = Template.bind({});
 FocusChecked.args = {
-  checked: true,
+  propSwitch: true,
   state: "focus",
-  label: "Switch label",
+  text: "Switch label",
 };
 
 export const States = () => (
@@ -69,17 +69,17 @@ export const States = () => (
     <div className="space-y-2">
       <h3 className="text-lg font-semibold">Switch States</h3>
       <div className="space-y-4">
-        <Switch checked={false} label="Switch label" />
+        <Switch propSwitch={false} text="Switch label" />
-        <Switch checked={true} label="Switch label" />
+        <Switch propSwitch={true} text="Switch label" />
-        <Switch checked={false} state="focus" label="Switch label" />
+        <Switch propSwitch={false} state="focus" text="Switch label" />
-        <Switch checked={true} state="focus" label="Switch label" />
+        <Switch propSwitch={true} state="focus" text="Switch label" />
       </div>
     </div>
   </div>
 );
 
 export const Interactive = () => {
-  const [checked, setChecked] = React.useState(false);
+  const [propSwitch, setPropSwitch] = React.useState(false);
   const [state, setState] = React.useState("default");
 
   return (
@@ -87,10 +87,10 @@ export const Interactive = () => {
       <div className="space-y-4">
         <h3 className="text-lg font-semibold">Interactive Switch</h3>
         <Switch
-          checked={checked}
+          propSwitch={propSwitch}
           state={state}
-          onChange={() => setChecked(!checked)}
+          onChange={() => setPropSwitch(!propSwitch)}
-          label="Enable notifications"
+          text="Enable notifications"
         />
       </div>
       <div className="space-y-4">
@@ -118,10 +118,10 @@ export const WithText = () => (
     <div className="space-y-2">
       <h3 className="text-lg font-semibold">Switch with Different Labels</h3>
       <div className="space-y-4">
-        <Switch checked={false} label="Enable notifications" />
+        <Switch propSwitch={false} text="Enable notifications" />
-        <Switch checked={true} label="Auto-save documents" />
+        <Switch propSwitch={true} text="Auto-save documents" />
-        <Switch checked={false} label="Dark mode" />
+        <Switch propSwitch={false} text="Dark mode" />
-        <Switch checked={true} label="Email updates" />
+        <Switch propSwitch={true} text="Email updates" />
       </div>
     </div>
   </div>

stories/modals/Tooltip.stories.js

@@ -22,7 +22,7 @@ export default {
 const Template = (args) => (
   <div className="p-16 flex items-center justify-center min-h-[200px]">
     <Tooltip {...args}>
-      <Button variant="default" size="medium">
+      <Button buttonType="filled" palette="default" size="medium">
         Hover me
       </Button>
     </Tooltip>

tests/components/Button.test.tsx

@@ -54,7 +54,7 @@ describe("Button (behavioral tests)", () => {
 
   it("renders as a link when href is provided", () => {
     render(
-      <Button href="/learn" variant="default">
+      <Button href="/learn" buttonType="filled" palette="default">
         Learn more
       </Button>,
     );

tests/components/MultiSelect.test.tsx

@@ -24,7 +24,7 @@ const config: ComponentTestSuiteConfig<Props> = {
     size: "S",
     palette: "Default",
     options: defaultChipOptions,
-    showAddButton: true,
+    addButton: true,
     addButtonText: "",
   } as Props,
   requiredProps: ["options"],
@@ -35,7 +35,7 @@ const config: ComponentTestSuiteConfig<Props> = {
     palette: "Inverse",
     onChipClick: vi.fn(),
     onAddClick: vi.fn(),
-    showAddButton: false,
+    addButton: false,
     addButtonText: "Add",
   },
   primaryRole: undefined, // MultiSelect contains multiple interactive elements
@@ -83,7 +83,7 @@ describe("MultiSelect – behaviour specifics", () => {
       <MultiSelect
         options={defaultChipOptions}
         onAddClick={handleAddClick}
-        showAddButton={true}
+        addButton={true}
         addButtonText="Add option"
       />,
     );
@@ -100,7 +100,7 @@ describe("MultiSelect – behaviour specifics", () => {
       <MultiSelect
         options={defaultChipOptions}
         onAddClick={handleAddClick}
-        showAddButton={true}
+        addButton={true}
         addButtonText=""
       />,
     );
@@ -127,18 +127,18 @@ describe("MultiSelect – behaviour specifics", () => {
     render(
       <MultiSelect
         options={defaultChipOptions}
-        showAddButton={true}
+        addButton={true}
         addButtonText="Add option"
       />,
     );
     expect(screen.getByText("Add option")).toBeInTheDocument();
   });
 
-  it("does not render add button when showAddButton is false", () => {
+  it("does not render add button when addButton is false", () => {
     render(
       <MultiSelect
         options={defaultChipOptions}
-        showAddButton={false}
+        addButton={false}
       />,
     );
     expect(screen.queryByRole("button", { name: /add/i })).not.toBeInTheDocument();