From c97fd6e8dfd7dbd930acd5ab37efffdd3d826dda Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 1 Mar 2022 23:24:34 +1100
Subject: [PATCH] Update many-roses-hammer.md

---
 .changeset/many-roses-hammer.md | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/.changeset/many-roses-hammer.md b/.changeset/many-roses-hammer.md
index 17c681ec3ea..e701c15e217 100644
--- a/.changeset/many-roses-hammer.md
+++ b/.changeset/many-roses-hammer.md
@@ -1,16 +1,20 @@
 ---
 '@primer/react': major
 ---
-### Button
+### Button deprecation
+
 A new set of `Button` components brings a much needed update. Previously to `v35`, `Button` was a set of seven independent components. In `v35`, we now have common `Button` usage guidelines and more convenient API.
+
 #### Button variants
 We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger`
+
 <table>
 <tr>
 <th> Before (v34)</th> <th> After (v35)</th>
 </tr>
 <tr>
 <td valign="top">
+    
 ```jsx
 <import {
     ButtonPrimary,
@@ -33,6 +37,7 @@ We now support a variant property which takes values `primary`, `invisible`, `ou
 ```
  </td>
 <td valign="top">
+    
 ```jsx
 import {
     Button
@@ -50,69 +55,91 @@ import {
     Danger Button
 </Button>
 ```
+    
 </td>
 </tr>
 </table>
+
 ### Leading and Trailing icons
+
 In the previous component, we allowed icon components to be direct children. This results in a lot of custom styling for the icon components.
 In the new one, we now have `leadinIcon` and `trailingIcon` properties.
+
 <table>
 <tr>
 <th> Before (v34)</th> <th> After (v35)</th>
 </tr>
 <tr>
 <td valign="top">
+    
 ```jsx
 <Button>
   <SearchIcon />
   Search
 </Button>
 ```
+    
  </td>
 <td valign="top">
+    
 ```jsx
 <Button leadingIcon={SearchIcon}>Search</Button>
 ```
+    
 </td>
 </tr>
 </table>
+
 ### Icon buttons
+
 Icon only buttons are common usages in products. So we now have a component for the specific usecase
+
 <table>
 <tr>
 <th> Before (v34)</th> <th> After (v35)</th>
 </tr>
 <tr>
 <td valign="top">
+    
 ```jsx
 <Button>
   <XIcon />
 </Button>
 ```
+    
  </td>
 <td valign="top">
+    
 ```jsx
 <IconButton aria-label="Close button" icon={XIcon} />
 ```
+    
 </td>
 </tr>
 </table>
+
 ### Size property
+
 Earlier we used `variant` to mean size property. Now we have a new property called `size` which is more semantically correct.
+
 <table>
 <tr>
 <th> Before (v34)</th> <th> After (v35)</th>
 </tr>
 <tr>
 <td valign="top">
+    
 ```jsx
 <Button variant="small">Small button</Button>
 ```
+    
  </td>
 <td valign="top">
+    
 ```jsx
 <Button size="small">Small button</Button>
 ```
+    
 </td>
 </tr>
 </table>