Button Migration Guide: 1.0.0 → 2.0.0

This guide helps you migrate from version 1.0.0 to 2.0.0 of the Button component.

Overview

The Button component has been updated with breaking changes and new features. Review the changes below and follow the migration steps to update your code.

Summary of Changes

  • changedRenamed `onClick` prop to `onPress`
  • addedAdded `variant` prop with "primary" and "secondary" options
  • changedUpdated styling approach to use CSS classes

Important Notes

  • The `onClick` prop has been renamed to `onPress` for consistency across the design system.
  • Added a new `variant` prop with support for "primary" and "secondary" styles.
  • The component now uses CSS classes instead of inline styles for better performance.

Code Comparison

Compare the before and after code to understand the changes. You can toggle between split and unified views, and see live previews of both versions.

  import { Button } from './Button';
  
  export default function App() {
    return (
-     <Button onClick={() => alert('clicked')}>
  
        Click me
      </Button>
    );
  }
  import { Button } from './Button';
  
  export default function App() {
    return (
  
+     <Button onPress={() => alert('clicked')}>
        Click me
      </Button>
    );
  }
Open on CodeSandboxOpen Sandbox
Initializing sandbox...
Open on CodeSandboxOpen Sandbox
Initializing sandbox...

Migration Steps

  1. Changed: Renamed `onClick` prop to `onPress`
  2. Added: Added `variant` prop with "primary" and "secondary" options
  3. Changed: Updated styling approach to use CSS classes